Question

我在DIV中拟合student.jpg时遇到了问题。

要求：galleryWrap位于logOuterWrap内。我需要在student.jpg内填充galleryWrap。

jQuery的：

galleryID++;
var logOuterWrap = $("<div/>",{class: "galleryBox", id: "main"+galleryID }).appendTo("#galleryContainer")
var galleryWrap = $("<div/>",{class: "galleryInner", id: "gallery"+galleryID }).appendTo(logOuterWrap)

galleryWrap.append(
            $("#gallery"+galleryID).html("<img src='img/student.jpg'/>"),"<br />");

CSS：

#galleryContainer{
     width: 100%;
     height: 100%;
     background-color: #fff;
}
.galleryBox{
    background-color: #00ff00;
    width: 75px;
    height: 75px;
}

Answer 1

看起来你最终得到了这个HTML结构

<div id="galleryContainer">
    <div class="galleryBox">
        <div class="galleryInner">
            <img src="..." />
        </div>
    </div>
</div>

所以这个CSS适合图像而不会扭曲比例

.galleryInner img{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

演示http://jsfiddle.net/wwbekuqk/

如果您还想水平和垂直居中对齐图像：

.galleryBox{
    background-color: #00ff00;
    width: 75px;
    height: 75px;
    position: relative;
}

.galleryInner img{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

演示http://jsfiddle.net/wwbekuqk/1/

Answer 2

不是添加Img标记，而是将galleryWrap背景设置为图像并设置background-size:cover

在动态创建的div中拟合图像

2 个答案: