图片比 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

我认为你必须添加边距和显示：

.server-listing .image img
    {
        width: 100%;
        height: auto;
        margin: 0px auto;
        display: block;
    }

Answer 2

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>

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

Answer 3

请尝试 max-width:100%;而不是宽度。

max-width 属性用于设置元素的最大宽度。

这可以防止宽度属性的值变得大于最大宽度。

Answer 4

查看它如何同时适用于小型和大型图像：

.server-listing {
    display: inline-block;
    max-width: 100vw;
    height: auto;
}

.server-listing .image {
    text-align: center;  
    margin-bottom: 10px;  
    background-color: gray;  
}

.server-listing .image img {
    max-width: 95vw;
    height: auto;
}

<div class='server-listing'>
  <div class='image'>
    <img src='https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xap1/v/t1.0-1/c0.0.50.50/p50x50/10342461_799073063461766_6339462327156793350_n.jpg?oh=169a0d52644a444c2f723b1d1ec6c64b&oe=558BEB09&__gda__=1435700277_205a1d24a106c52496fe0e3eb20470e6' />
  </div>
<div>
<div class='server-listing'>
  <div class='image'>
    <img src='http://www.zastavki.com/pictures/1680x1050/2010/Animals_Cats_Cat_023761_.jpg' />
   </div>
</div>

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

Image 100% below the img's original width

css

layout

image