如何仅使用 css 裁剪图像并保留 justify-content答案

【问题标题】：how to crop the image using css only with justify-content left如何仅使用 css 裁剪图像并保留 justify-content
【发布时间】：2020-10-03 06:31:16
【问题描述】：

我正在尝试根据屏幕尺寸使用 CSS 中的 display 和 justify-content 裁剪图像。图像如下所示，在矢量标题和图像开始之间有一些填充。此图像在基于桌面的屏幕中显示时看起来不错，但在基于移动的屏幕中显示不正常。我正在使用下面的 CSS 来裁剪网页中的图像。

图像外观

CSS 代码

.container {
    width: 100%;
    height: 68px;
    overflow: hidden;
    display: flex;
    justify-content: left;
    position: sticky;
    position: -webkit-sticky;
}

HTML 代码

<div class="container">
   <img src="/header.png">
</div>

使用 CSS 裁剪图像后，图像如下所示

但我还想根据屏幕尺寸在 Vector Header 的开头进行裁剪，如下所示。 CSS中是否有任何方法可以使用现有的CSS代码来做到这一点。

提前感谢您的建议和建议。

【问题讨论】：

负边距-左？
但它会在图片前添加间距

标签： html css

【解决方案1】：

试试background-position属性

#header { 
      background-image: url('https://i.stack.imgur.com/9RIPB.png'); 
      background-position: -30px 0px; 
      width: 200px; 
      height: 100px;
}

&lt;img id="header" /&gt;

【讨论】：