将一个img放在一个div中 - 两个都调整大小 [英] centering an img within a div - both being resized
问题描述
我正在尝试在其容器（它也应该居中）中心调整大小的图像。我不明白为什么这么困难，但我一直在努力让这个工作7小时现在。请帮助： - ）
I'm trying to center a resized image within its container (which should also be centered). I don't understand why this is so difficult, but I've been trying to get this working for 7 hours now. Please help :-)
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<link rel="stylesheet" href="styles.css" />
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
function imageresize() {
var conHeight = ($(window).height())* 0.56;
$(".resize").css({'height' : conHeight + 'px'}); // set large-image container to 56% of window height
}
$(document).ready(function() {
imageresize();
});
$(window).resize(function() {
imageresize();
});
</script>
</head>
<body>
<div id="navigation-area">
<div id="navigation">
</div>
</div>
<div id="set-overflow">
<div class="resize" id="large-image">
<img src="images/bg-home.jpg" class="resize">
</div>
</div>
</body>
</html>
css：
/*------------------------------*/
* {
margin: 0;
padding: 0;
}
#navigation {
width:990px;
border:1px solid green;
margin:23px auto;
height:42px;
}
#navigation-area {
width:100%;
height:135px;
background:url(images/bg-navigation.png) top center no-repeat;
overflow:hidden;
position:absolute;
top:-3px;
left:50%;
margin-left:-50%;
z-index:50;
}
#large-image {
width:1970px;
position:absolute;
margin-left:-985px;
left:50%;top:0;
z-index:40;
display:block;
}
#set-overflow {
overflow:hidden;
width:100%;
height:100%;
border:1px solid red;
position:absolute;
z-index:20;
}
.resize {
margin-left:auto;
margin-right:auto;
}
我需要overflow：hidden包含div，因为这将是一个单页滚动网站和大图像只需要在第一个div滚动到。图片需要为视口/窗口的56％。
I need the overflow:hidden on the containing div as this will eventually be a single-page scrolling site and the large image is required only in the first div scrolled to. The image needs to be 56% of the viewport/window.
请让我知道我是否需要澄清什么。
Please let me know whether I need to clarify anything.
MTIA
推荐答案
像这样吗？
让我知道，如果这不是你要找的，我们可以一起调整。
Let me know if that's not what you're looking for and we can tweak it together.
这篇关于将一个img放在一个div中 - 两个都调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
