是否可以设置与宽度相同的高度(比例1:1)？
例
+----------+
| body |
| 1:3 |
| |
| +------+ |
| | div | |
| | 1:1 | |
| +------+ |
| |
| |
| |
| |
| |
+----------+
CSS
div {
width: 80%;
height: same-as-width
}
根据现有的答案,我设法将裁剪图像居中.但是,我无法使中心裁剪的图像响应.
题
当我减小Web浏览器窗口的大小时,中心裁剪的图像不能很好地缩小.相反,它维护它是固定的height,width并溢出视图端口.小提琴可能会更清楚地表明这个问题.
如何才能使中心裁剪图像缩小？理想情况下,中心裁剪后的图像会在裁剪时保持良好的缩小,并保持相似的纵横比.
.centered-container {
max-width: 960px;
margin: auto;
}
.center-cropped-img {
width: 640px;
height: 360px;
overflow: hidden;
margin: 10px auto;
border: 1px red solid;
position: relative;
}
.center-cropped-img img {
position: absolute;
left: -100%;
right: -100%;
top: -100%;
bottom: -100%;
margin: auto;
min-height: 100%;
min-width: 100%;
}<div class="centered-container">
<div class="center-cropped-img">
<img src="http://i.imgur.com/Ag2ZCgz.png" alt="" />
</div>
<div class="center-cropped-img">
<img src="http://i.imgur.com/BQUgmlB.png" alt="" />
</div>
</div>同样,这里是一个小提琴,或许可以比散文更好地展示问题.