响应式图像在移动设备上截断答案

【问题标题】：Responsive image cutting off on mobile响应式图像在移动设备上截断
【发布时间】：2023-03-12 23:17:01
【问题描述】：

Div 具有响应性，但会截断一小部分图像。 div 中唯一的内容是图像。

#header {
  -ms-flex-align: center;
  -ms-flex-pack: center;
  color: rgba(255, 255, 255, 0.5);
  -moz-align-items: center;
  -webkit-align-items: center;
  -ms-align-items: center;
  align-items: center;
  display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-top: 0;
  display: -ms-flexbox;
  overflow: hidden;
  position: relative;
  text-align: center;
  height: 400px;
  padding-bottom: 0px;
  width: 100%;
}

<div id="header">
    <img src="https://via.placeholder.com/800x400.png" width="800" height="400" alt="Logo">
</div>

只想为移动用户缩小图像，但它会稍微切断图像的左侧。我可以通过缩小图像来“修复”它，但它在桌面上看起来不太好。

【问题讨论】：

您可以在图像上使用 CSS object-fit 属性。见here
我试过了，没用，给我同样的问题。在左侧略微切断。不确定我的图像或代码是否有问题。我以前在使用其他图片时没有遇到过这个问题。

标签： html css

【解决方案1】：

您已为 img 设置了固定的宽度和高度，因此它不会在较小的设备上缩小。切换到relatives 尺寸可能有助于解决问题。如果没有，您可能想看看media queries。

#header {
  -ms-flex-align: center;
  -ms-flex-pack: center;
  color: rgba(255, 255, 255, 0.5);
  -moz-align-items: center;
  -webkit-align-items: center;
  -ms-align-items: center;
  align-items: center;
  display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-top: 0;
  display: -ms-flexbox;
  overflow: hidden;
  position: relative;
  text-align: center;
  height: 400px;
  padding-bottom: 0px;
  width: 100%;
}

<div id="header">
    <img src="https://via.placeholder.com/800x400.png" width="70%" alt="Logo">
</div>

【讨论】：

【解决方案2】：

请不要在图像标签中使用任何内联高度宽度。添加我在这里添加的这个 img 样式类。它会正常工作的。

#header {
  -ms-flex-align: center;
  -ms-flex-pack: center;
  color: rgba(255, 255, 255, 0.5);
  -moz-align-items: center;
  -webkit-align-items: center;
  -ms-align-items: center;
  align-items: center;
  display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-top: 0;
  display: -ms-flexbox;
  overflow: hidden;
  position: relative;
  text-align: center;
  padding-bottom: 0px;
  width: 100%;
  height: 400px;
}

img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

<div id="header">
  <img src="https://via.placeholder.com/800x400.png" alt="Logo">
</div>

【讨论】：