使用CSS缩放HTML中的图像
使用CSS缩放HTML中的图像
提问于 2012-05-15 12:41:43
我正在尝试创建一个可以调整到最现代分辨率的HTML页面，我对我所有的div容器都使用了%，它们缩放得很好，但我在这些容器中有图像，它们的大小保持不变。
我不想图像失去他们的纵横比，但我需要他们重新调整大小，以适应容器。我的例子在4:3比例的屏幕上工作得很好，但在宽屏上图像被切断了。我使用的图像是213px宽x 300px高。如果我必须使用js来解决问题，那也没问题。
<div style="position:fixed;top:2%;left:2%;overflow:hidden;height:38%;width:12%;text-align:center;border:.15em solid #000;">
<div style="padding:1% 1% 5% 1%;font-size:90%;font-family:'trebuchet MS', verdana, arial, sans-serif;color:#000;"><b>TEST</b></div>
<div style="padding:1%;width:44%;display:inline-block;">
<img src="black_card.jpg" style="max-width:100%;" alt="Black" />
</div>
<div style="padding:1%;width:44%;display:inline-block;">
<img src="black_card.jpg" style="max-width:100%;" alt="Black" />
</div>
<div style="padding:1%;width:44%;display:inline-block;">
<img src="black_card.jpg" style="max-width:100%;" alt="Black" />
</div>
<div style="padding:1%;width:44%;display:inline-block;">
<img src="black_card.jpg" style="max-width:100%;" alt="Black" />
</div>
<div style="padding:1%;width:44%;display:inline-block;">
<img src="black_card.jpg" style="max-width:100%;" alt="Black" />
</div>
<div style="padding:1%;width:44%;display:inline-block;">
<img src="black_card.jpg" style="max-width:100%;" alt="Black" />
</div>
</div>回答 6
Stack Overflow用户
回答已采纳
发布于 2012-05-16 12:44:42
我自己设法解决了这个问题，我给容器div一个高度和宽度，然后所有其他div和下面的图像只得到一个高度，这使得屏幕大小动态，我不得不使用display:-moz-inline-block来使图像在容器div中居中。查看http://jsfiddle.net/mb5T4/2/将结果屏幕调整为典型的比例(4:3，5:4，16:9)，并在div中调整所有图像的大小。
Stack Overflow用户
发布于 2012-05-15 12:48:43
我想我有关于保持超文本标记语言长宽比的a post，try giving this a shot
HTML：
<div id="container"> <!--base wrapper-->
<div id="vertical"></div> <!--flexible vertical component-->
<div id="ratioElement">content</div> <!--fit to wrapper element-->
</div>CSS：
#container{
position:relative;
width:100%;
float:left;
}
#vertical{
margin-top:50%; /* 2:1 ratio (#container width : #vertical height) */
}
#ratioElement{
position:absolute; /*this would be the <img>*/
top:0;
bottom:0;
left:0;
right:0;
background:#069;
}Stack Overflow用户
发布于 2012-05-15 12:51:32
如果你想在一行中使用一个图像，那么你应该像下面这样编写代码。
<div style="position:fixed;top:2%;left:2%;overflow:hidden;height:38%;width:12%;text-align:center;border:.15em solid #000;">
<div style="padding:1% 1% 5% 1%;font-size:90%;font-family:'trebuchet MS', verdana, arial, sans-serif;color:#000;"><b>TEST</b></div>
<div style="padding:1%;width:44%;display:inline-block; float:left; clear:left""> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
<div style="padding:1%;width:44%;display:inline-block; float:left; clear:left""> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
<div style="padding:1%;width:44%;display:inline-block; float:left; clear:left""> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
<div style="padding:1%;width:44%;display:inline-block; float:left; clear:left""> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
<div style="padding:1%;width:44%;display:inline-block; float:left; clear:left""> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
<div style="padding:1%;width:44%;display:inline-block; float:left; clear:left""> <img src="black_card.jpg" style="max-width:100%; alt="Black" /> </div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10594224
复制相关文章
相似问题
腾讯云开发者
