在弹性布局中自动缩放图像
在弹性布局中自动缩放图像
提问于 2009-10-31 02:46:36
如何在具有弹性布局的网站上并排显示两个图像，这些图像将自动缩放到父容器的50%？
我昨天晚上在玩它，但没有走太远。
当我使用div时，它们相互重叠，或者第一个下面显示第二个图像。
当我使用表格时，表格变得比屏幕更宽，导致垂直滚动条。
我不知道预先图像是什么大小，也不知道用户有什么分辨率，理想情况下，我会纯粹通过css设置，而不是使用javascript。
我在其他页面上幸运地使用了单图像自动缩放，通过设置max-width:90%来适应容器，但我不能在这里应用这个技巧。有趣的是，在这种情况下，max-width是根据window (父元素)设置的，而在上面的例子中，max-width是根据图像本身的宽度设置的。
很抱歉我的英语，如果有什么不清楚的地方，请联系我。
谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2009-10-31 03:03:49
我明白你的意思了。我有一个问题，就是它们太宽了一点，所以我把边距去掉了一点，因为它不需要百分号中的一小部分。看看这是否能起到作用：
<html>
<head>
<style>
div {
width: 80%;
background: #acf;
}
div img {
width: 50%;
padding: 0;
margin: 0 -0.2em 0 0;
}
</style>
</head>
<body>
<div>
<img src='a.jpg' />
<img src='b.jpg' />
</div>
</body>
</html>编辑:或者更好的是，如果你所拥有的只是盒子里的图片，那就不要让它换行：
<html>
<head>
<style>
div {
width: 80%;
background: #acf;
white-space: nowrap;
overflow: visible;
}
div img {
width: 50%;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div>
<img src='a.jpg' /><img src='b.jpg' />
<!-- Don't put a space between the images. -->
</div>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1651627
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号