开发者社区 问答 正文

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

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

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

展开
收起
a123456678 2016-03-25 17:42:19 5183 分享
分享
版权
举报
1 条回答
写回答
取消 提交回答
  • 纯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-07-17 19:14:50 举报
    赞同 评论

    评论

    全部评论 (0)

    登录后可评论
问答分类:
问答地址: