blocks|key|1573320|text|按百分比设置宽度和高度|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1573321|++<img+class="img1"+width="100%25"+height="100%25"/>|code-block|syntax|javascript|1573322|使用媒体查询|1573323|/*横向*/|1573324|@media+screen+and+(min-aspect-ratio:+1/1)+{

+//use+your+style+for+landscape
++++++++++++++++++++++++++++++++++++++++++}|1573325|/*纵向(即窄视口图)+*/|1573326|@media+screen+and+(max-aspect-ratio:+1/1)+{

//+your+style+for+portrait
++++++++++++++++++++++++++++++++++++++++++}|1573327|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>set width and height in percentage</p>

<pre><code>  &lt;img class="img1" width="100%" height="100%"/&gt;
</code></pre>

<p>use media query</p>

<p>/* Landscape */</p>

<pre><code>@media screen and (min-aspect-ratio: 1/1) {

 //use your style for landscape
                                          }
</code></pre>

<p>/* Portrait (i.e. narrow viewport) */</p>

<pre><code>@media screen and (max-aspect-ratio: 1/1) {

// your style for portrait
                                          }
</code></pre>


blocks|key|4022282|text|以下是您需要遵循的代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4022283|img+{
++++max-width:+100%25;
++++height:+auto;
++++}|code-block|syntax|javascript|4022284|参考：http://html5hub.com/html5-picture-element/|offset|length|4022285|entityMap|0|LINK|mutability|MUTABLE|url|http://html5hub.com/html5-picture-element/^0|0|0|3|16|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Here is the code you need to follow :</p>

<pre><code>img {
    max-width: 100%;
    height: auto;
    }
</code></pre>

<p>Refer : <a href="http://html5hub.com/html5-picture-element/" rel="noreferrer">http://html5hub.com/html5-picture-element/</a></p>


blocks|key|1911722|text|从img标记中删除width和height属性，并添加此图像max-width:100%25;+width:100%25;的CSS文件|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1911723|entityMap^0|1|3|9|5|F|6|U|R|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|G|$]]

<p>Remove <code>width</code> and <code>height</code> attribute from <code>img</code> tag and add in CSS file for this image <code>max-width:100%; width:100%;</code></p>


blocks|key|1911741|text|++++<style>
++++@media+only+screen+and+(max-width:+1024px)+{++++
++++++++.abc+.bcd{max-width:100%25;height:auto;border:1px+solid+#ff0000;width:24%25;display:inline-block;}
++++++++.abc+.bcd+a+img{width:100%25;height:auto;}
++++}

++++@media+only+screen+and+(max-width:+640px)+{+
++++++++.abc+.bcd{max-width:100%25;height:auto;border:1px+solid+#ff0000;width:48%25;display:inline-block;}
++++++++.abc+.bcd+a+img{width:100%25;height:auto;}
++++}
++++</style>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1911742|您可以删除边框。|unstyled|1911743|如果删除边框，则一行中4行可以使用25%25的宽度，一行中2行可以使用50%25的宽度。|1911744|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code>    &lt;style&gt;
    @media only screen and (max-width: 1024px) {    
        .abc .bcd{max-width:100%;height:auto;border:1px solid #ff0000;width:24%;display:inline-block;}
        .abc .bcd a img{width:100%;height:auto;}
    }

    @media only screen and (max-width: 640px) { 
        .abc .bcd{max-width:100%;height:auto;border:1px solid #ff0000;width:48%;display:inline-block;}
        .abc .bcd a img{width:100%;height:auto;}
    }
    &lt;/style&gt;
</code></pre>

<p>You can remove the border.</p>

<p>If you remove border, then you can use width 25% for 4 rows in one line and 50% for 2 rows in one line.</p>


blocks|key|1577314|text|使用媒体查询，您可以根据自己的喜好划分图像。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1577315|.abc{padding:0;+margin:0;+box-sizing:border-box;+width:100%25;}
.bcd{display:inline-block;width:24%25;}
@media+all+and+(max-width:+360px){
+++.bcd
+++{
++++display:inline-block;
++++width:49%25;
+++}
}|code-block|syntax|javascript|1577316|1577317|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|K|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|L|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|M|8|@]|9|@]|A|$]]]|I|$]]

<p>Using media query you can divide the images as you like.</p>

<pre><code>.abc{padding:0; margin:0; box-sizing:border-box; width:100%;}
.bcd{display:inline-block;width:24%;}
@media all and (max-width: 360px){
   .bcd
   {
    display:inline-block;
    width:49%;
   }
}
</code></pre>

<p><a href="http://jsfiddle.net/K6NR6/1/" rel="nofollow"><strong>DEMO</strong></a></p>


blocks|key|4022368|text|+<style>
++++++++html,+body,+div,+span,+applet,+object,+iframe,h1,+h2,+h3,+h4,+h5,+h6,+p,+blockquote,+pre,a,+abbr,+acronym,+address,+big,+cite,+code,del,+dfn,+em,+img,+ins,+kbd,+q,+s,+samp,small,+strike,+strong,+sub,+sup,+tt,+var,b,+u,+i,+center,dl,+dt,+dd,+ol,+ul,+li,fieldset,+form,+label,+legend,table,+caption,+tbody,+tfoot,+thead,+tr,+th,+td,article,+aside,+canvas,+details,+embed,+figure,+figcaption,+footer,+header,+hgroup,+menu,+nav,+output,+ruby,+section,+summary,time,+mark,+audio,+video+{++margin:+0;++padding:+0;+border:+0;++font-size:+100%25;++++font:+inherit;++vertical-align:+baseline;}/*+HTML5+display-role+reset+for+older+browsers+*/article,+aside,+details,+figcaption,+figure,+footer,+header,+hgroup,+menu,+nav,+section+{++++display:+block;}body+{++line-height:+1;}ol,+ul+{++++list-style:+none;}blockquote,+q+{+++quotes:+none;}blockquote:before,+blockquote:after,q:before,+q:after+{+++content:+'';++++content:+none;}table+{++border-collapse:+collapse;++border-spacing:+0;}
++++++++.container+.bcd{float:+left;position:+relative;}
++++++++.container+.bcd+div{background-color:+#fff;border:+1px+solid+#e4e4e4;border-radius:+5px;margin-top:+10px;min-height:+100px;}
++++++++.container+.bcd+div+img{border-radius:+5px+5px+0+0;height:+auto;width:+100%25;}
++++++++.container+.bcd+div+a.bottom{background:+none+repeat+scroll+0+0+#fff;bottom:+4px;color:+#000;font-size:+14px;padding:+9px+0+5px;position:+relative;width:+100%25;display:+inline-block;}
++++++++.container+.bcd+div+a.bottom+h3{padding:+0+10px;}
++++++++@media+(max-width:+700px)+{
++++++++++++.bcd{width:+100%25;}
++++++++++++.bcd+div{margin:+0+10px}
++++++++}
++++++++@media+(min-width:+700px)+{
++++++++++++.bcd+{width:+50%25;}
++++++++++++.bcd:nth-child(odd)+div+{margin-left:+10px;margin-right:+5px;}
++++++++++++.bcd:nth-child(even)+div+{margin-left:+5px;margin-right:+10px;}
++++++++}
++++</style>

<div+class="container">
++++++++<div+class="bcd">
++++++++++++<div>
++++++++++++++++<a+href="#">
++++++++++++++++++++<img++class="img1"+width="50"+height="50"/>
++++++++++++++++</a>
++++++++++++++++<a+class="bottom"><h3>Some+Text</h3></a>
++++++++++++</div>
++++++++</div>
++++++++<div+class="bcd">
++++++++++++<div>
++++++++++++++++<a+href="#">
++++++++++++++++++++<img++class="img1"+width="50"+height="50"/>
++++++++++++++++</a>
++++++++++++++++<a+class="bottom"><h3>Some+Text</h3></a>
++++++++++++</div>
++++++++</div>
++++++++<div+class="bcd">
++++++++++++<div>
++++++++++++++++<a+href="#">
++++++++++++++++++++<img++class="img1"+width="50"+height="50"/>
++++++++++++++++</a>
++++++++++++++++<a+class="bottom"><h3>Some+Text</h3></a>
++++++++++++</div>
++++++++</div>
++++++++<div+class="bcd">
++++++++++++<div>
++++++++++++++++<a+href="#">
++++++++++++++++++++<img+class="img1"+width="50"+height="50"/>
++++++++++++++++</a>
++++++++++++++++<a+class="bottom"><h3>Some+Text</h3></a>
++++++++++++</div>
++++++++</div>
++++++++<div+class="bcd">
++++++++++++<div>
++++++++++++++++<a+href="#">
++++++++++++++++++++<img+class="img1"+width="50"+height="50"/>
++++++++++++++++</a>
++++++++++++++++<a+class="bottom"><h3>Some+Text</h3></a>
++++++++++++</div>
++++++++</div>
++++++++<div+class="bcd">
++++++++++++<div>
++++++++++++++++<a+href="#">
++++++++++++++++++++<img++class="img1"+width="50"+height="50"/>
++++++++++++++++</a>
++++++++++++++++<a+class="bottom"><h3>Some+Text</h3></a>
++++++++++++</div>
++++++++</div>
++++++++<div+class="bcd">
++++++++++++<div>
++++++++++++++++<a+href="#">
++++++++++++++++++++<img++class="img1"+width="50"+height="50"/>
++++++++++++++++</a>
++++++++++++++++<a+class="bottom"><h3>Some+Text</h3></a>
++++++++++++</div>
++++++++</div>
++++++++<div+class="bcd">
++++++++++++<div>
++++++++++++++++<a+href="#">
++++++++++++++++++++<img+class="img1"+width="50"+height="50"/>
++++++++++++++++</a>
++++++++++++++++<a+class="bottom"><h3>Some+Text</h3></a>
++++++++++++</div>
+++++++</div>
++++++++<div+style="clear:+both;margin:+0px;padding:+0px;"></div>
++++</div>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4022369|Demo|unstyled|offset|length|4022370|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/maulikshekhada/TDfF5/^0|0|0|4|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

<pre><code> &lt;style&gt;
        html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {  margin: 0;  padding: 0; border: 0;  font-size: 100%;    font: inherit;  vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {    display: block;}body {  line-height: 1;}ol, ul {    list-style: none;}blockquote, q {   quotes: none;}blockquote:before, blockquote:after,q:before, q:after {   content: '';    content: none;}table {  border-collapse: collapse;  border-spacing: 0;}
        .container .bcd{float: left;position: relative;}
        .container .bcd div{background-color: #fff;border: 1px solid #e4e4e4;border-radius: 5px;margin-top: 10px;min-height: 100px;}
        .container .bcd div img{border-radius: 5px 5px 0 0;height: auto;width: 100%;}
        .container .bcd div a.bottom{background: none repeat scroll 0 0 #fff;bottom: 4px;color: #000;font-size: 14px;padding: 9px 0 5px;position: relative;width: 100%;display: inline-block;}
        .container .bcd div a.bottom h3{padding: 0 10px;}
        @media (max-width: 700px) {
            .bcd{width: 100%;}
            .bcd div{margin: 0 10px}
        }
        @media (min-width: 700px) {
            .bcd {width: 50%;}
            .bcd:nth-child(odd) div {margin-left: 10px;margin-right: 5px;}
            .bcd:nth-child(even) div {margin-left: 5px;margin-right: 10px;}
        }
    &lt;/style&gt;

&lt;div class="container"&gt;
        &lt;div class="bcd"&gt;
            &lt;div&gt;
                &lt;a href="#"&gt;
                    &lt;img  class="img1" width="50" height="50"/&gt;
                &lt;/a&gt;
                &lt;a class="bottom"&gt;&lt;h3&gt;Some Text&lt;/h3&gt;&lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="bcd"&gt;
            &lt;div&gt;
                &lt;a href="#"&gt;
                    &lt;img  class="img1" width="50" height="50"/&gt;
                &lt;/a&gt;
                &lt;a class="bottom"&gt;&lt;h3&gt;Some Text&lt;/h3&gt;&lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="bcd"&gt;
            &lt;div&gt;
                &lt;a href="#"&gt;
                    &lt;img  class="img1" width="50" height="50"/&gt;
                &lt;/a&gt;
                &lt;a class="bottom"&gt;&lt;h3&gt;Some Text&lt;/h3&gt;&lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="bcd"&gt;
            &lt;div&gt;
                &lt;a href="#"&gt;
                    &lt;img class="img1" width="50" height="50"/&gt;
                &lt;/a&gt;
                &lt;a class="bottom"&gt;&lt;h3&gt;Some Text&lt;/h3&gt;&lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="bcd"&gt;
            &lt;div&gt;
                &lt;a href="#"&gt;
                    &lt;img class="img1" width="50" height="50"/&gt;
                &lt;/a&gt;
                &lt;a class="bottom"&gt;&lt;h3&gt;Some Text&lt;/h3&gt;&lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="bcd"&gt;
            &lt;div&gt;
                &lt;a href="#"&gt;
                    &lt;img  class="img1" width="50" height="50"/&gt;
                &lt;/a&gt;
                &lt;a class="bottom"&gt;&lt;h3&gt;Some Text&lt;/h3&gt;&lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="bcd"&gt;
            &lt;div&gt;
                &lt;a href="#"&gt;
                    &lt;img  class="img1" width="50" height="50"/&gt;
                &lt;/a&gt;
                &lt;a class="bottom"&gt;&lt;h3&gt;Some Text&lt;/h3&gt;&lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="bcd"&gt;
            &lt;div&gt;
                &lt;a href="#"&gt;
                    &lt;img class="img1" width="50" height="50"/&gt;
                &lt;/a&gt;
                &lt;a class="bottom"&gt;&lt;h3&gt;Some Text&lt;/h3&gt;&lt;/a&gt;
            &lt;/div&gt;
       &lt;/div&gt;
        &lt;div style="clear: both;margin: 0px;padding: 0px;"&gt;&lt;/div&gt;
    &lt;/div&gt;
</code></pre>

<p><a href="http://jsfiddle.net/maulikshekhada/TDfF5/" rel="nofollow">Demo</a></p>


blocks|key|4022372|text|在div中设置要设置为背景图像的图像，并将背景大小设置为封面|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4022373|background-image:+url('YOUR+URL');
background-size:+cover;|code-block|syntax|javascript|4022374|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>this setting the image you want to set as a background image in a div and give set the background size as cover</p>

<pre><code>background-image: url('YOUR URL');
background-size: cover;
</code></pre>


blocks|key|1911768|text|CSS：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1911769|img+{
++max-width:+100%25;
++max-height:+100%25;
}|code-block|syntax|javascript|1911770|HTML：|1911771|<img+class="img"+src="image.png">|1911772|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>CSS:</p>

<pre><code>img {
  max-width: 100%;
  max-height: 100%;
}
</code></pre>

<p>HTML:</p>

<pre><code>&lt;img class="img" src="image.png"&gt;
</code></pre>


<p>My code is as Follows:</p>

<pre><code>&lt;div class="abc"&gt;
    &lt;div class="bcd"&gt;
        &lt;a href="#"&gt;
            &lt;img class="img1" width="50" height="50"/&gt;
        &lt;/a&gt;
        &lt;a&gt;
            &lt;h3&gt;Some Text&lt;/h3&gt;
        &lt;/a&gt; 
    &lt;/div&gt;
    &lt;div class="bcd"&gt;
        &lt;a href="#"&gt;
            &lt;img class="img1" width="50" height="50"/&gt;
        &lt;/a&gt;
        &lt;a&gt;
            &lt;h3&gt;Some Text&lt;/h3&gt;
        &lt;/a&gt; 
    &lt;/div&gt;
    &lt;div class="bcd"&gt;
        &lt;a href="#"&gt;
            &lt;img class="img1" width="50" height="50"/&gt;
        &lt;/a&gt;
        &lt;a&gt;
            &lt;h3&gt;Some Text&lt;/h3&gt;
        &lt;/a&gt; 
    &lt;/div&gt;
    &lt;div class="bcd"&gt;
        &lt;a href="#"&gt;
            &lt;img class="img1" width="50" height="50"/&gt;
        &lt;/a&gt;
        &lt;a&gt;
            &lt;h3&gt;Some Text&lt;/h3&gt;
        &lt;/a&gt; 
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

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

<p>I have to give two Images in Mobile and Four in iPad in one line!! </p>


How to make image responsive inside a div

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我的代码如下：<div class="abc">    <div class="bcd">        <a href="#">            <img class="img1" width="50" height="50"/>        </a>        <a>            <h3>So...

问如何在div中响应图像
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在div中响应图像EN