为了账号安全,请及时绑定邮箱和手机立即绑定

怎么样设置图片宽度自适应100%且图片高度等于图片宽度

怎么样设置图片宽度自适应100%且图片高度等于图片宽度

萧十郎 2019-03-30 09:28:44
假设一张300x250的图片,放在600px的div内,如何用css把图片拉伸到600x600
查看完整描述

2 回答

?
慕慕森

TA贡献1856条经验 获得超17个赞

纯CSS应该不可以吧
js方法:
;(function($){
$(function(){
var$divWidth=$('xxx').width();
$('img').css({'height':$divWidth});
})
})(jQuery)
css3里面有一个calc的动态计算方法,不过好像只能计算一个属性的值,即高只能计算高,宽只能计算宽,高度不能去获取宽度的值并计算。所以这样对你这个需求也无法满足。
不过你也在先手动计算了div的宽高比,然后再使用高度,就比如:
假如div宽度是600px,高度是500px,那么宽/高是1.2,那就可以设置css属性
div{
width:600px;
height:500px;
overflow:hidden;
}
img{
width:100%;
height:120%;
}
但是这样高度却不能随着你的宽度的变化而动态变化
                            
查看完整回答
反对 回复 2019-03-30
?
三国纷争

TA贡献1804条经验 获得超7个赞

用背景图吧如果不用考虑background-size的兼容性
div.imgBox
.imgBox{
height:600px;
width:600px;
background:url(图片url)no-repeatcentercenter;
background-size:100%auto;
}
                            
查看完整回答
反对 回复 2019-03-30
  • 2 回答
  • 0 关注
  • 2512 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信