如何将此图像居中,同时将图像大小保持为百分比,以便通过浏览器更改大小?我一直在这个图像上玩这个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/
由于 安吉拉
答案 0 :(得分: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;
}
答案 1 :(得分: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);
});