Question

我正在尝试在main-content背景图像的末尾显示图像（宽度为6000像素，高度为300像素）。图像应符合屏幕宽度，但保持原点高度。

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

我已经制作了宽度为6000px的图像，这样我就能适应所有的屏幕。

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

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

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

您可以将图像放在包含width: 100%的容器中，并将overflow属性设置为隐藏。

使用flexbox将图像置于此容器中心。

请注意，如果您将其全屏显示并调整浏览器大小，则此代码段更易于测试...

#header-waves {
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

<div class="main-content">
  <div id="header-waves">
    <img src="https://placehold.it/6000x300" alt="">
  </div>
</div>

Answer 2

试试这个：

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

Answer 3

你可以使用background：url（...）来做，就像示例..

＆＃13;

.main-content
{
  background: url('http://via.placeholder.com/6000x300');
  background-size: auto 100%;
  width:100%;
  height:300px;
}

＆＃13;

<div class="main-content">
       ...content
 </div>

＆＃13;

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

3 个答案: