Пропорциональное изменение размера динамически загружаемых изображений и центрирование их по вертикали и горизонтали - PullRequest
Новая
       9

Пропорциональное изменение размера динамически загружаемых изображений и центрирование их по вертикали и горизонтали

1 голос
/ 04 марта 2012

У меня есть несколько динамически загружаемых изображений, ширина и высота которых задаются внутри кода. Очевидно, это не пропорционально масштабирует их. Этот код я использую для динамической загрузки изображений : 

$(function(){
    $.getJSON("inc/API.php", {command:"top3"}, function(result) {
        for(var i = 0; i<result.length; i++) {
            $("<div id='top3imgContainer'><a href='images/" + result[i].imageFileName + "' rel='shadowbox[top3]' title='" 
                + result[i].imageHeader + "'><img width='220' height='220' src='images/" + result[i].imageFileName + "' id='top3img' /></a></div>").appendTo("#divTop3");
        } Shadowbox.init({
                continuous:true,
                displayCounter:false,
                overlayColor:"#a09e92",
                overlayOpacity:0.8
            });
     });
});

HTML : 

<div id="divContent">
    <div id="divTop3">
    </div>
</div>

Это CSS : 

#divContent {
width:860px;
border: 1px solid;
border-color: #dbd9ca;
border-radius: 10px;
-moz-border-radius: 10px;
margin:5px;
margin-top:20px;
margin-bottom:20px;
padding:5px;
clear:both;
margin-bottom:20px;
}

#divTop3 {
width:850;
text-align:center;
position:relative;
}

#top3imgContainer {
width:245px;
height:270px;
background-image:url(../images_ui/frame.png);
background-repeat:no-repeat;
display:inline-block;
margin: 0 15px 0 15px;
}

img#top3img {
border-radius: 10px;
-moz-border-radius: 10px;
margin-left:13px;
margin-right:20px;
margin-top:17px;
}

И после применения CSS это выглядит так: http://i44.tinypic.com/168x7i9.jpg

Не совсем пропорционально и не центрировано. Таким образом, вопрос - как я могу пропорционально масштабировать их? И после этого - как я могу центрировать каждое изображение в его div?

Спасибо!

1 Ответ

0 голосов
/ 04 марта 2012

Я сделал это: http://jsfiddle.net/ydZJk/

Основные изменения: 

#top3imgContainer {
    width:       100px;
    height:      120px;
    line-height: 120px;
}

img {
    vertical-align: middle;
    max-width:  100px; /* check in all browsers! */
    max-height: 120px; /* Old IEs won't like it */
}
...