Question

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>

只是希望图像缩小以供移动用户使用，但它会稍微切掉图像的左侧。我可以通过缩小图像来“修复”它，但是在桌面上看起来并不好。

Answer 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>

Answer 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>

在移动设备上剪切掉响应式图像

2 个答案: