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

Question

假设一张 300x250 的图片，放在600px的div内，如何用css把图片拉伸到 600x600

<div style="width:600px">
<img src="#" style="width:100%;height:?"/>
</div>

Answer 1

用背景图吧 如果不用考虑background-size的兼容性
div.imgBox

.imgBox {
height: 600px;
width: 600px;
background: url(图片url) no-repeat center center;
background-size: 100% auto;
}

Answer 2

纯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%;
}

但是这样高度却不能随着你的宽度的变化而动态变化

Answer 3

<div style="width:600px;height:600px">
<img src="#" style="width:100%;height:100%;"/>
</div>

Answer 4

img{width:100vw;height:100vw;}

css3可以解决

Answer 5

首先你得大约知道你图片占屏幕百分比，
其次你要计算这百分比内有几px是属于图片外层div的margin或padding或border之和。
那么就好计算它的高度等于：
height:calc( 50vw - 42px );

50vw 50%屏幕宽度，图片实际宽度等于50%屏幕宽度减去图片的margin...等

Answer 6

<div style="width:600px; position:relative; padding-bottom:600px; height:0;">
    <img src="http://ubmcmm.baidustatic.com/media/v1/0f000nYQae6t2iCMjPksts.png" style="width:100%; height:100%; position:absolute;" />
</div>

这样就不会考虑图片变形的问题了。
你可以用我的代码试试看是否ok？

Answer 7

background-size: 600px 100%;
https://codepen.io/assmdx/pen/qBOKJXJ