我使用下面的代码尝试以下操作:
- 当浏览器窗口按比例缩小时,图像被裁剪到 浏览器窗口缩放到800px或更小的宽度
- 在浏览器窗口宽度小于等于800像素时,图像应该变成响应。意思是:照片剩下的那部分(通过缩放浏览器窗口裁剪后)应该缩放
但是它不起作用。目前,在使用下面的代码时,图像会进行裁剪,当浏览器窗口宽度达到800px或更小时,图像确实会响应,但只有通过加载完整且未裁剪的图像才能这样做。我希望照片的裁剪部分成为响应。
有人能帮忙吗?还有一个JSFIDDLE HERE。
#apple-box {
width: 80%;
overflow: hidden;
}
@media screen and (max-width: 800px) {
#big-apple {
width: 100vw;
}
<div id="apple-box">
<img id="big-apple" src="http://www.stedentripidee.nl/wp-content/uploads/2015/10/stedentrip-new-york.png">
</div>
这是你想要达到的效果吗?JSfiddle
#apple-box {
width: 90%;
overflow: hidden;
background-image: url(http://www.stedentripidee.nl/wp-content/uploads/2015/10/stedentrip-new-york.png);
background-size: cover;
background-position: center;
height: 400px;
}
@media only screen and (max-width: 800px) {
#apple-box:after {
content: '';
display:block;
padding: 28.5%;
}
#apple-box{
height: auto;
}
}
我将把图像处理为css中的背景图像。这给了你更多的控制,更少的编码和嵌套。
代码如下:
#apple-box {
width: 80%;
height: 100%;
position: absolute;
background-image: url("http://www.stedentripidee.nl/wp-content/uploads/2015/10/stedentrip-new-york.png");
background-size: 125%;
background-repeat: no-repeat;
background-position: top left;
}
<div id="apple-box">
</div>