我想要一个 100% 宽度和最大高度的图像。当缩放窗口并达到最大高度时,宽度仍应为 100%,但将图像“裁剪”得更大(前提是图像大小合适)。这意味着当它在一个大尺寸的窗口上时,你可以看到更多的图像边(左和右),而在一个小尺寸的窗口上你可以看到更少。我会发布我的 CSS 尝试,但我现在不知道如何做。希望您能理解我的问题,我会附上一张可视化图。
我的代码,不要混淆,我想做一个 slider ,但现在只关注一张图片,所以 slider 暂时退出游戏:
.slider-inner img {
display:none;
max-width: 100%;
height: auto;
}
#main-slider {
width: 80%;
min-width: 500px;
height: 450px;
min-height: 400px;
overflow: hidden;
margin: 0 auto;
}
.slider-inner{
width: 100%;
height: 450px;
margin: 0 auto;
position:relative;
overflow: hidden;
float:left;
padding: 0px;
}
我想要的(可视化):
最佳答案
如果我对您的理解是正确的,您希望您的图像保持其高度并在窗口尺寸较小时裁剪宽度。
检查这个例子:
div{
height: 300px;
position: relative;
overflow: hidden;
}
div img{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div>
<img src="https://images.unsplash.com/photo-1536221236547-04007cfc3d8b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4d542ff4e10ff7de9d35d2ec8a467454&w=1000&q=80">
</div>
关于javascript - CSS/cut an img's width when reducing the screen/window width 减少屏幕/窗口宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52205038/