如何使图像响应内部的div [英] How to make image responsive inside a div

问题描述

我的代码如下：

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

如何让图像响应移动（360X640像素）和iPad（768X1024像素）？
你能给我CSS代码吗？

How can I make the image responsive for Mobile(360X640px) and iPad(768X1024px)? Can you please give me the CSS Code?

我必须在手机中提供两个图片，并在iPad中提供四个图片！

I have to give two Images in Mobile and Four in iPad in one line!!

推荐答案

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

Here is the code you need to follow :

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

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

这篇关于如何使图像响应内部的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！