我在div中有一个图像,我希望图像缩小到包含div的100%宽度或100%高度。根据建议here,我尝试将max-height和max-width设置为100%。这仍然会导致一些溢出(我不想用overflow:hidden裁剪图像)。图像浮动在div中。
有可能做到这一点吗?我的代码如下。我做错了吗?
div#_content div#_thumbnails div {
padding:2px;
display:inline-block;
min-width:10%;
max-width:25%;
min-height:80px;
max-height:125px;
text-align:center;
}
div#_content div#_thumbnails img {
display:inline;
padding:2px;
float:left;
max-height:100%;
max-width:100%;
}
在下面的javascript中,imgs是一个URL列表。缩略图是容器所在的母亲。
for (i in imgs) {
if (imgs[i]) {
var new_img = document.createElement('IMG'),
container = document.createElement('DIV')
new_img.setAttribute('alt', "image"+i.toString())
new_img.setAttribute('src', imgs[i])
container.appendChild(new_img)
thumbnails.appendChild(container)
}
}
我希望这不是一个愚蠢的问题,但我已经搜索过,而且我找到的建议都没有。
答案 0 :(得分:1)
请尝试:
<style type="text/css">
#thumbContainer {
position:relative;
}
.thumb{
position:relative;
float:left;
width: 100%;
height: auto;
}
.thumb img {
background-size: cover !important;
width: 100%;
height: auto;
}
</style>
<div id="thumbContainer">
<div class="thumb"><img src="http://3.bp.blogspot.com/_ABFjy8u6h9s/TStw8-_4j1I/AAAAAAAACE0/cKm4ZiIFilk/s1600/NATUREZA+01.jpg" /></div>
<div class="thumb"><img src="http://3.bp.blogspot.com/_ABFjy8u6h9s/TStw8-_4j1I/AAAAAAAACE0/cKm4ZiIFilk/s1600/NATUREZA+01.jpg" /></div>
<div class="thumb"><img src="http://3.bp.blogspot.com/_ABFjy8u6h9s/TStw8-_4j1I/AAAAAAAACE0/cKm4ZiIFilk/s1600/NATUREZA+01.jpg" /></div>
</div>
(http://jsfiddle.net/ahjjg/)
Adittional,我建议<img>
提供背景信息。
答案 1 :(得分:0)
如果您使用的是PHP,那么这是最适合您的解决方案
http://www.welancers.com/perfect-solution-for-image-resizing-based-on-width-height/