有没有办法让图像保持成比例？

Question

您好我正在尝试使用html和CSS来查看哪些有用，哪些无效，我想知道是否可以使图像保持在屏幕的中心并始终适应大小屏幕。例如，当我在1920 * 1080的屏幕上看它时大到192 * 108的图像时，当我在1600 * 900屏幕上观看它时，它变为160 * 90而图像的中心保持在中间。

PS：图像的分辨率变化并不重要，即使它使图像有时看起来很糟糕。

Answer 1

要适应屏幕大小，请将图像放入容器中，然后执行以下操作：

   img{
    width:100%;
    height:auto; /*maintains aspect ratio */
   }

现在图片将具有容器的尺寸!!

将图像对齐div的中心...执行：

div{
 width:80%;
 margin:0 auto; /*align div in center first*/
 text-align:center /*center content*/
}

Answer 2

仅使用图片标记无法做到这一点。您可以将您正在使用的图像作为背景图像，然后将尺寸设置为覆盖。基本上这个：

body {
    background-image: url('url/to/your/image.jpeg');
    background-size: cover;
    background-position: center center;
}

Answer 3

取自

Use CSS to make an image scale up and down

img {
    width:100%;
}

但是，这很容易使图像看起来像完全废话。更安全的方式可能是：

img {
    max-width:100%;
}

无论哪种方式都可以通过浏览器调整大小来改变图像大小。但是，第二个不会将图像拉伸超过其自然尺寸，因此看起来不会变形。