jquery - 使图像适合动态创建的 div

Question

我在将 student.jpg 放入 DIV 时遇到问题。

要求: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/