javascript - CSS裁剪图像以适应屏幕宽度，同时保持图像的原始高度

Question

我正在尝试在 main-content 的末尾显示一张图片(6000 像素宽，300 像素高)，例如背景图片。图片应适合屏幕宽度，但保持原点高度。

换句话说，总是以某种方式在中心裁剪图像，而 x 裁剪的宽度是屏幕宽度尺寸，高度裁剪是图像的原点高度。

我制作了宽度为 6000 像素的图像，以便适合所有屏幕。

下面的代码显然没有按预期工作，它只是显示原始 img，同时缩放高度以保持纵横比相对于屏幕宽度。

newnewwaves.svg:http://svgshare.com/i/3DT.svg

我希望如何显示:https://ibb.co/e80Ddw

HTML:

<div class="main-content">
       ...content
        <div id="header-waves">
            <img src="/assets/images/newnewwaves.svg" alt="">
        </div>
 </div>

CSS:

.main-content {
   position: relative;
}
#header-waves {
   position: absolute;
   left: 0;
   bottom: 0;
}
#header-waves img {
  width: 100%;
  height: auto;
  display: block;
}

Answer 1

试试这个:

.img-class {

    width: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    object-fit: cover; 
}

这将有助于通过限制宽度和裁剪图像使其居中来保持纵横比。

如果不行，请试试这个:

.img-class {
  width: 100%;
  height: 400px; /* Set your fixed Limit */
  background-size: cover;
}