Question

我正在尝试将已调整大小的图像置于其容器中（也应该居中）。我不明白为什么这么困难，但我一直试图让它工作7个小时。请帮忙： - ）

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;
}

我需要溢出：隐藏在包含div上，因为这最终将是单页滚动网站，只有在滚动到的第一个div中才需要大图像。图像需要是视口/窗口的56％。

请告诉我是否需要澄清任何事情。

MTIA

Answer 1

喜欢这个吗？

http://jsfiddle.net/9ZgWg/26/

如果这不是你想要的，请告诉我，我们可以一起调整它。

将一个img集中在div中 - 两者都被调整大小

1 个答案: