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

时间:2015-03-05 09:36:11

标签: css image layout

我正在尝试将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页面

(注意:图像可以是任何尺寸)

4 个答案:

答案 0 :(得分:2)

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

&#13;
&#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;
&#13;
&#13;

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

答案 1 :(得分:2)

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

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

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

答案 2 :(得分:-1)

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

&#13;
&#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;
&#13;
&#13;

答案 3 :(得分:-2)

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

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