艺术品店详情下面的图片是要从后台传过来的,一般是卡片机手机拍的照片,我想的是
<div class="a">
<img src="559718_2012092919343110edp.jpg">
</div>
<style>
*{ margin:0;
padding:0;}
.a{ width:100%;
height:150px;}
.a img{ width:100%;
height:100%;
max-width:100%;
max-height:100%;
}
</style>
但是效果不好,怎么才能让图片宽高都等比例显示呢,如果光设置宽确实图片会缩小,但是高不受控制,在不尺寸的手机上看影响了整体布局。
图片高宽比固定可以设置宽度,高度auto
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
用 hidden 属性决定父容器装不下图片时如何显示
另外如果要锁定非图片元素的高宽比,
可以设置宽度为百分比,高度0,
底部padding为实际高度对应百分比。
.item {
float: left;
margin: 10px 5%;
padding-bottom: 33.98%;
width: 21%;
height: 0;
}
这样容器就会根据父容器尺寸动态缩放,而且锁定高宽比了。
谷歌到的原始答案
[http://zihua.li/2013/12/keep-height-relevant-to-width-using-css/]
[https://ruby-china.org/topics/17011#reply15]
img {
object-fit: cover;
}
具体情况请自行谷歌
图片当背景啊,background-size:cover;
编辑掉,思路错误。。。
其实你是想让宽度和高度联系起来对吧,height根据width改变而改变。这样的需求得曲线救国。
实现:
<div class="wrapper">
.....其他内容
<div class="imgwrap">
<img>
</div>
.....其他内容
</div>
.wrapper {
position: relative;
}
.imgwrap {
position: relative;
padding-top: 60%;
}
img {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
好了。现在的图片高度就是宽度的60%(自己设定)了。
关键点是:
1。百分比的padding是依据包含块的宽度改变的。
2。imgwrap的padding又充当img的高度。
最后,图片的高度就与宽度联系在一起了。