Question

例如，您将如何创建一个居中的图像，该图像在移动设备上占据100％的页面，但左对齐并在桌面上占据不超过该页面的一半？这是我当前的代码：

.img{
    text-align: center;
    max-width: 100%;
    height: auto;
}

@media (min-width: 480px) {
    .img {
        text-align: left;
        max-width: 50%;
    }

同样，您如何编码移动设备上图片下方但在桌面上图片周围的文字块？

Answer 1

这里有一个简单的解决方案，使用float将文字放在图片旁边。

您可以在文本中添加更多样式，以获取所需的样式。

此外，text-align不能添加到<img>，但是可以添加到保存和图像的块元素上，该元素将在块中对齐。例如，我创建了img-container并在其中对齐图像。

.img-container {
  text-align: center;
  max-width: 100%;
}

.img {
  width: 100%;
  height: auto;
}

@media (min-width: 480px) {
  .img-container {
    max-width: 50%;
    float: left;
  }

  .text {
    max-width: 50%;
    float: left;
  }
}

<div class="img-container">
  <img class="img" src="https://placekitten.com/500/500">
</div>

<p class="text">Some text below image on mobile and next to image on desktop.</p>

如何调整图像大小以使其适合移动设备？

1 个答案: