如何调整图片的大小以方便移动设备？

Posted 2023-02-07

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何调整图片的大小以方便移动设备？相关的知识，希望对你有一定的参考价值。

例如，你如何创建一个在移动设备上100%居中的图片，但在桌面设备上是左对齐的，并且不超过一半的页面？

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


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

同样的，你如何编写一个文字块，在手机上位于图片下方，但在桌面上环绕图片？

答案

下面是一个简单的解决方案，使用 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>