Question

如何让 div 内的图像具有响应性

2014-07-11

107012

css image responsive-design

我的代码如下：

<div class="abc">
    <div class="bcd">
        <a href="#">
            <img class="img1" width="50" height="50"/>
        </a>
        <a>
            <h3>Some Text</h3>
        </a> 
    </div>
    <div class="bcd">
        <a href="#">
            <img class="img1" width="50" height="50"/>
        </a>
        <a>
            <h3>Some Text</h3>
        </a> 
    </div>
    <div class="bcd">
        <a href="#">
            <img class="img1" width="50" height="50"/>
        </a>
        <a>
            <h3>Some Text</h3>
        </a> 
    </div>
    <div class="bcd">
        <a href="#">
            <img class="img1" width="50" height="50"/>
        </a>
        <a>
            <h3>Some Text</h3>
        </a> 
    </div>
</div>

如何让图片对移动设备（360X640px）和 iPad（768X1024px）做出响应？你能给我 CSS 代码吗？

我必须在一行中为移动设备提供两张图片，为 iPad 提供四张图片！！

Answer 1

这是您需要遵循的代码：

img {
    max-width: 100%;
    height: auto;
    }

参考： http://html5hub.com/html5-picture-element/

Answer 2

从 img 标签中删除 width 和 height 属性，并在 CSS 文件中添加此图像 max-width:100%; width:100%;

Answer 3

以百分比设置宽度和高度

  <img class="img1" width="100%" height="100%"/>

使用媒体查询

/* 横向 */

@media screen and (min-aspect-ratio: 1/1) {

 //use your style for landscape
                                          }

/* 纵向（即窄视口） */

@media screen and (max-aspect-ratio: 1/1) {

// your style for portrait
                                          }