使用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>Stack Overflow用户
发布于 2012-05-15 13:26:52
您可以使用JQuery Resiable：JQuery UI Resizable
$(选择器).resizable(...)；
有很多例子。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/10594224
复制相关文章
相似问题
腾讯云开发者
