css - 图片比 img 的原始宽度低 100%

Question

我正在尝试将 img 宽度设置为其容器的 100%，当图像低于其原始图像时，容器会根据屏幕宽度更改大小大小，我想将 img 宽度设置为 100%，但是当 image-container 大于图像的原始宽度时，我希望图像居中容器内部。

有什么想法吗？

.server-listing {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.server-listing .image {
    text-align: center;
}

.server-listing .image img {
    width: 100%;
    height: auto;
}

我目前的 CSS，真的很基础，我需要指导 - 谢谢大家!

<?php foreach($this->model->data['servers'] as $server) { ?>
    <div class="server-listing">
        <div class="image">
            <img src="x.jpeg">
        </div>
    </div>
<?php } ?>

我的 phtml 页面

(注意:图像可以是任何大小)

Answer 1

max-width 是您应该使用的 CSS 属性!

.server-listing {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    background-color: lime;
}
.server-listing .image {
    text-align: center;
}
.server-listing .image img {
    max-width: 100%;
    height: auto;
}

<div class="server-listing">
    <div class="image">
        <img src="http://placehold.it/500" />
    </div>
</div>

您可能必须进入全屏模式才能真正玩这个!