我有一张尺寸为 10143x1963 的图片。在我的 CSS 中，我将图像的高度设置为 400px，否则图像会占用我网站上的大量空间。从分辨率可以看出，图像非常宽，因为它是一张全景照片。我想将这张图片作为标题放在我的网站上，高度为 400 像素，但宽度可以改变但不会比我网站上的其他元素大。我使用 CSS 将图像的宽度设置为 100%，但是当我调整我的网页大小时，它会将图像挤压在一起，这使得图像上的所有内容的比例都不正确。我需要的是图像在右侧被截断，因此它不会 sqeeuze 但可以调整大小，高度为 400 像素。我希望有人能帮我解决这个问题。
TL;DR:如何自动调整高度为 400 像素和宽度为 100% 的图像，但保持比例？
最佳答案
将您的图像包裹在高度为 400 像素的 div 中，并将溢出设置为隐藏。我已经将它设置在一个包装器中，例如80% 宽度。请全屏查看代码片段并尝试调整窗口大小:
.wrapper{
width:80%;
margin-right:5%;
margin-left:5%;
height:400px;
overflow:hidden;
border:1px solid #ff0000;
}
#myimage{height:400px;}<div class="wrapper">
<img id="myimage" src="http://www.wildnatureimages.com/images%203/San-Diego-Panoramic..jpg">
</div>关于html - 如何让HTML根据图片的设置高度自动裁边？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29444764/