css - 如何使图像在 div 内响应

Question

我的代码如下:

<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代码吗？

我必须在一行中给出 Mobile 中的两张图片和 iPad 中的四张图片!!

Answer 1

这是您需要遵循的代码:

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

引用:http://html5hub.com/html5-picture-element/