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

您好我正在尝试一些与HTML和CSS的东西，看看有什么作品，什么不是，我想知道是否有可能使图像停留在屏幕的中心，并始终适应大小屏幕。例如，当我在1920 * 1080的屏幕上查看图像时，图像的大小是192 * 108，当我在1600 * 900的屏幕上查看图像时，图像的中心位于中间，它变为160 * 90。有没有办法让图像保持比例？

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

来源

2014-01-14 user3052776

当高度超过宽度时，您是否还需要将图像的高度最大化？ –

介意显示你的一些css/html？ – NoobEditor

如果你找到答案标记了吗？ – Marriott81

为了适应屏幕的大小，将图像中的容器中，然后执行：

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*/ 
}

来源

2014-01-14 16:34:08 NoobEditor

是的，但他说他想保持图像的中心位于中间。这只会缩放图像。 – donnywals

只有当他需要优化宽度时才能使用。但是如果他还需要优化高度（取决于屏幕和图像比例），那就更加复杂了。 –

但是不可能让div适应屏幕的大小呢？并根据div的中心放置它。 – user3052776

你不能只是一个形象标签做到这一点。您可以将您使用的图像作为背景图像，然后设置尺寸来覆盖。基本上这样的：

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

来源

2014-01-14 16:38:30 donnywals

虽然我dute downvote ....但你的解决方案是为背景...不是在div图像！ – NoobEditor

从

Use CSS to make an image scale up and down

img { 
    width:100%; 
}

但是服用，可以很容易地使图像看起来像废话总额。一种更安全的方式可能是：

img { 
    max-width:100%; 
}

无论哪种方式将使浏览器调整大小的图像更改大小。然而，第二个不会将图像拉伸超过其自然尺寸，所以它看起来不会变形。

来源

2014-01-14 16:45:02 Marriott81

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

回答

相关问题