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属性！

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

Answer 2

请尝试max-width：100％;而不是宽度。

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

这可以防止width属性的值变得大于max-width。

Answer 3

了解小图像和大图像的工作原理：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 4

我认为你必须添加保证金并显示：

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

图像比img的原始宽度低100％

4 个答案: