Question

如何确保容器中的img居中并从移动设备正确扩展到桌面？这是一个demo on Codepen。扩展到移动设备以更好地理解问题

HTML

<div class="image-container">
  <img src="https://placeimg.com/470/310/people" alt="" /> 
</div>

CSS

.image-container{
 width: 100%;
 height: 500px;
 max-height: 500px;
 background: red;
 overflow: hidden;
 text-align: center;
 position: relative;
 display: block;
 }

 img{
 height: auto;
 width: 100%;
 max-width: 100%;
 position: absolute;
 top: -50%;
 left: 0;
}

我问这个是因为图像在移动设备上丢失了高度并且看起来不正确。我对它的工作方式有点像`background-size：cover。我希望图像能够完全填满容器

Answer 1

要在div中水平和垂直居中图像，您可以设置top: 50%和left: 50%，然后只需添加transform: translate(-50%, -50%)。

要使图像响应，您可以使用max-width: 100%，默认情况下，高度为自动。

＆＃13;

.image-container {
  width: 100%;
  height: 500px;
  background: red;
  overflow: hidden;
  position: relative;
}
img {
  max-width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

＆＃13;

<div class="image-container">
  <img src="https://placeimg.com/470/310/people" alt="" />
</div>

＆＃13;

其他选项是使用Flexbox如果您不想使用relative/absolute位置，但要保持img响应，您可以object-fit: contain使用height: 100%

＆＃13;

.image-container {
  width: 100%;
  height: 500px;
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
}

img {
  max-width: 100%;
  object-fit: contain;
}

＆＃13;

<div class="image-container">
  <img src="https://placeimg.com/470/310/people" alt="" />
</div>

＆＃13;

如果您希望img的行为与background-size: cover相同，那么object-fit: cover与height: 100%和width: 100%

一起使用

body,
html {
  margin: 0;
  padding: 0;
}
.image-container {
  width: 100%;
  height: 500px;
  background: red;
  display: flex;
  align-items: center;
  justify-content: center;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

＆＃13;

<div class="image-container">
  <img src="https://placeimg.com/470/310/people" alt="" />
</div>

＆＃13;

<style>
    :host {
        display: block;
    }

    .waiting {
        --task-background-color: #e9d32c;
        --task-border-color: #b0a030;
    }

    .assigned {
        --task-background-color: #1b7eee;
        --task-border-color: #1357a4;
    }

    .started {
        --task-background-color: #EF6207;
        --task-border-color: #c05d1d;
    }

    .working {
        --task-background-color: #e99c2c;
        --task-border-color: #c48222;
    }

    .aborted {
        --task-background-color: #E34126;
        --task-border-color: #b72d15;
    }
    </style>

    <div class="items">
        <app-task id="task1" class="waiting"></app-task>
        <app-task id="task2" class="waiting"></app-task>
        <app-task id="task3" class="working"></app-task>
        <app-task id="task4" class="working"></app-task>
        <app-task id="task5" class="assigned"></app-task>
        <app-task id="task6" class="aborted"></app-task>
    </div>

＆＃13;

Answer 2

您可以添加margin:0 auto;以水平对齐中心。 Remove width:100%因为这会拉伸图像的宽度，除非你想要它。保持height:auto以width进行调整。

.image-container{
  width: 100%;
  height: 500px;
  max-height: 500px;
  background: red;
  overflow: hidden;
  text-align: center;
  position: relative;
  display: block;
}

img{
 height: auto;
 max-width: 100%;
 margin:0 auto;
}

<div class="image-container">
  <img src="https://placeimg.com/470/310/people" alt="" />
</div>

使用reponsive <img/>填充div并集中定位

2 个答案: