html - 保持我的图像响应和方面合理？

Question

我如何实现这种魔力？ http://aprendagames.com/stock/brokebot/errorpages-headless-robot.html?errorcode=404

我也是这种情况。我需要一个在适合屏幕的同时保持中心位置的图像。之后只需保持宽高比。

Answer 1

html

<div class="container">
    <img class="img" src="...">
</div>

CSS

.container{
    width:100%;
    text-align: center;
}
.container img{
    width: 100%;
    height: auto;
    display: inline-block;
    max-width: 200px; /*change to fit your image*/
}

img 标签上的最大宽度设置为 200px 以提供示例，将其设置为您希望图像达到的最大宽度。

这是一个 fiddle :https://jsfiddle.net/hzpd04va/