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

Question

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

换句话说，总是在中心裁剪图像，而 x 裁剪的宽度是屏幕宽度尺寸，高度裁剪是图像的原始高度。

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

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

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;
}