0

この画像を中央に配置するだけでなく、画像のサイズをパーセンテージで維持して、ブラウザでサイズを変更するにはどうすればよいですか? 私はここでこの画像のcssをいじって、高さと幅のサイズを変更しましたhttp://www.georgewoolfe.com/home.html

これはcssです：

#image {
    bottom: 50%;
    height: 40%;
    left: 50%;
    margin: 0 -40%;
    position: absolute;
    right: 50%;
    top: 56px;
    width: 80%;
}

#image img {
    width: 100%;
}

これを行うjQueryが少しあるのではないかと思っていましたか？

私はまさに私が意味することを行うこのウェブサイトを見つけましたhttp://www.laurabartlettgallery.com/exhibitions/bravo-zebra/

ありがとうアンジェラ

4

2 に答える 2

1

HTML:

<div id="imageWrapper">
    <img src="http://www.georgewoolfe.com//images/Cecily-Brown_CecilyBrown02.jpg" alt="">
</div>

CSS:

#imageWrapper {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0px 20px;
    text-align: center;
}
#imageWrapper img {
    width: 100%;
    max-width: 433px;
}
于 2013-05-10T11:27:33.433 に答える
0

このコードを使用できます: html:

<img src="1.jpg" class="img" />

jQuery:

jQuery(document).ready(function(){
jQuery(".img").css('position','absolute');
//width of screen
var width = screen.width;
//width of image
var img_width = jQuery(".img").width();
//get image left prop for absolute position
var left = (width-img_width)/2;
jQuery(".img").css('left',left);
});
于 2013-05-10T10:32:37.287 に答える