首页 文章

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

提问于
浏览 次
0

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

换句话说，不知何故总是在中心裁剪图像，而x裁剪的宽度是屏幕宽度尺寸，高度裁剪是图像的原点高度 .

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

下面的代码不能正常工作它显而易见，它只是在缩放高度时显示原始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;
}
javascript html css

2 回答

  • 0

    您可以将图像放在 width: 100% 的容器中，并将overflow属性设置为hidden .

    使用 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>
    回复于
  • 1

    您可以使用background：url（...）来完成，就像示例一样..

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

    <div class="main-content">
       ...content
 </div>
    回复于

相关问题