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

我必须在移动设备中提供两个图像,在iPad中提供四个图像!

Answer 1

以下是您需要遵循的代码:

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

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

Answer 2

以百分比设置宽度和高度

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