保持我的图像响应和方面理性？

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以提供示例，将其设置为您希望图像到达的最大宽度。

这是一个小提琴：https://jsfiddle.net/hzpd04va/