CSS 如何使图像在 div 内响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24695992/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make image responsive inside a div
提问by Kusumakar Pant
My code is as Follows:
我的代码如下：
<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>
How can I make the image responsive for Mobile(360X640px) and iPad(768X1024px)? Can you please give me the CSS Code?
如何使图像响应 Mobile（360X640px）和 iPad（768X1024px）？你能给我CSS代码吗？
I have to give two Images in Mobile and Four in iPad in one line!!
我必须在一行中在移动设备中提供两个图像，在 iPad 中提供四个图像！
回答by Sulthan Allaudeen
Here is the code you need to follow :
这是您需要遵循的代码：
img {
max-width: 100%;
height: auto;
}
回答by Anon
Remove widthand heightattribute from imgtag and add in CSS file for this image max-width:100%; width:100%;
从标签中删除width和height属性img并为此图像添加 CSS 文件max-width:100%; width:100%;
回答by Naseeruddin V N
this setting the image you want to set as a background image in a div and give set the background size as cover
此设置您要设置为 div 中的背景图像的图像，并将背景大小设置为封面
background-image: url('YOUR URL');
background-size: cover;
回答by Suresh Ponnukalai
回答by Maulik Patel
<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%; 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;}
}
</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>
回答by Arunkumar
set width and height in percentage
以百分比设置宽度和高度
<img class="img1" width="100%" height="100%"/>
use media query
使用媒体查询
/* Landscape */
/* 风景 */
@media screen and (min-aspect-ratio: 1/1) {
//use your style for landscape
}
/* Portrait (i.e. narrow viewport) */
/* 纵向（即窄视口）*/
@media screen and (max-aspect-ratio: 1/1) {
// your style for portrait
}
回答by Adascript
CSS:
CSS：
img {
max-width: 100%;
max-height: 100%;
}
HTML:
HTML：
<img class="img" src="image.png">
回答by Subrata Mallik
<style>
@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;}
}
</style>
You can remove the border.
您可以删除边框。
If you remove border, then you can use width 25% for 4 rows in one line and 50% for 2 rows in one line.
如果您删除边框，那么您可以在一行中使用 25% 的 4 行宽度，将 50% 用于一行中的 2 行。
