如何在 div 中使图像响应
Posted
技术标签:
【中文标题】如何在 div 中使图像响应【英文标题】：How to make image responsive inside a div 【发布时间】：2014-09-01 23:26:07 【问题描述】：我的代码如下：
<div class="abc">
<div class="bcd">
<a href="#">
<img class="img1" />
</a>
<a>
<h3>Some Text</h3>
</a>
</div>
<div class="bcd">
<a href="#">
<img class="img1" />
</a>
<a>
<h3>Some Text</h3>
</a>
</div>
<div class="bcd">
<a href="#">
<img class="img1" />
</a>
<a>
<h3>Some Text</h3>
</a>
</div>
<div class="bcd">
<a href="#">
<img class="img1" />
</a>
<a>
<h3>Some Text</h3>
</a>
</div>
</div>
如何使图像响应移动（360X640 像素）和 iPad（768X1024 像素）？ 你能给我CSS代码吗？
我必须在一行中提供两个移动图像和四个 iPad 图像！
【问题讨论】：
【参考方案1】：以百分比设置宽度和高度
<img class="img1" />
使用媒体查询
/* 横向 */
@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
【讨论】：
我必须在一行中给出两个移动端的图像和四个 iPad 端的图像！！【参考方案2】：这是您需要遵循的代码：
img
max-width: 100%;
height: auto;
参考：http://html5hub.com/html5-picture-element/
【讨论】：
【参考方案3】：从img 标记中删除width 和height 属性，并为该图像添加CSS 文件max-width:100%; width:100%;
【讨论】：
【参考方案4】： <style>
@media only screen and (max-width: 1024px)
.abc .bcdmax-width:100%;height:auto;border:1px solid #ff0000;width:24%;display:inline-block;
.abc .bcd a imgwidth:100%;height:auto;
@media only screen and (max-width: 640px)
.abc .bcdmax-width:100%;height:auto;border:1px solid #ff0000;width:48%;display:inline-block;
.abc .bcd a imgwidth:100%;height:auto;
</style>
你可以去掉边框。
如果你去掉边框，那么你可以为一行 4 行使用 25% 的宽度，为一行 2 行使用 50% 的宽度。
【讨论】：
【参考方案5】：使用媒体查询，您可以随意划分图像。
.abcpadding:0; margin:0; box-sizing:border-box; width:100%;
.bcddisplay:inline-block;width:24%;
@media all and (max-width: 360px)
.bcd
display:inline-block;
width:49%;
DEMO
【讨论】：
【参考方案6】： <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 .bcdfloat: left;position: relative;
.container .bcd divbackground-color: #fff;border: 1px solid #e4e4e4;border-radius: 5px;margin-top: 10px;min-height: 100px;
.container .bcd div imgborder-radius: 5px 5px 0 0;height: auto;width: 100%;
.container .bcd div a.bottombackground: 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 h3padding: 0 10px;
@media (max-width: 700px)
.bcdwidth: 100%;
.bcd divmargin: 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" />
</a>
<a class="bottom"><h3>Some Text</h3></a>
</div>
</div>
<div class="bcd">
<div>
<a href="#">
<img class="img1" />
</a>
<a class="bottom"><h3>Some Text</h3></a>
</div>
</div>
<div class="bcd">
<div>
<a href="#">
<img class="img1" />
</a>
<a class="bottom"><h3>Some Text</h3></a>
</div>
</div>
<div class="bcd">
<div>
<a href="#">
<img class="img1" />
</a>
<a class="bottom"><h3>Some Text</h3></a>
</div>
</div>
<div class="bcd">
<div>
<a href="#">
<img class="img1" />
</a>
<a class="bottom"><h3>Some Text</h3></a>
</div>
</div>
<div class="bcd">
<div>
<a href="#">
<img class="img1" />
</a>
<a class="bottom"><h3>Some Text</h3></a>
</div>
</div>
<div class="bcd">
<div>
<a href="#">
<img class="img1" />
</a>
<a class="bottom"><h3>Some Text</h3></a>
</div>
</div>
<div class="bcd">
<div>
<a href="#">
<img class="img1" />
</a>
<a class="bottom"><h3>Some Text</h3></a>
</div>
</div>
<div style="clear: both;margin: 0px;padding: 0px;"></div>
</div>
Demo
【讨论】：
【参考方案7】：此设置您要设置为 div 中的背景图像的图像，并将背景大小设置为封面
background-image: url('YOUR URL');
background-size: cover;
【讨论】：
【参考方案8】：CSS：
img
max-width: 100%;
max-height: 100%;
HTML：
<img class="img" src="image.png">
【讨论】：
以上是关于如何在 div 中使图像响应的主要内容，如果未能解决你的问题，请参考以下文章