老师怎么让图片不变形的情况下变大啊?感觉我的图片好小

老师怎么让图片不变形的情况下变大啊?感觉我的图片好小

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1">

<link rel="stylesheet" type="text/css" href="css/base.css">

<link rel="stylesheet" type="text/css" href="css/icons.css">

<style type="text/css">

.header-container{

width: 100%;

height: 2.5rem;

background-color: #eee;

}

.container{

padding: 0 0.75rem;

display: flex;

justify-content: space-between;

}

.container,

.header-logo,

.header-btn{

height: 100%;

}

.header-logo-link,

.header-btn{

display: flex;

align-items: center;

}

.header-logo-link{

height: 100%;

}

.header-logo-link img{

width: 5.0rem;

height: 2.0rem;

}

.header-btn a{

width: 5.0rem;

height: 1.5rem;

background: pink;

border-radius: 0.75rem;

line-height: 1.5rem;

text-align: center;


}

</style>

<script type="text/javascript" src="js/flexible.js"></script>

</head>

<body>

<header class="header-container">

<div class="container">

<div class="header-logo">

<a href="###" class="header-logo-link"><img src="img/img/logo.png"></a>

</div>

<div class="header-btn">

<a href="javascript:;">下载App</a>

</div>

</div>

</header>

</body>

</html>


正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,等比可以保证的是不变形。不过若是与原来的差别很大的话,还是会显示有点问题哦。有可能会失真,就是显示的不太清楚。

祝学习愉快~

好帮手慕糖 2020-07-12 10:02:17

同学你好,因为图片设置了宽高,如下,所以是会根据这个改变的哦。

http://img1.sycdn.imooc.com//climg/5f0a6ea409b8f56403430205.jpg

因为设置的与原来的比例可能不相等,所以可能会变形,可以参考原图片的宽高比,设置下图片的宽高。

祝学习愉快~

  • 提问者 慕斯卡3605978 #1
    我是按照图片的大小写的,只要让他们等比例增长就像了吗?比如原来的是100px,80px,变成50px,40px的宽高
    2020-07-12 18:11:30
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
3.WebAPP开发与小程序
  • 参与学习           人
  • 提交作业       622    份
  • 解答问题       6815    个

微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师