【发布时间】：2019-10-02 17:28:37
【问题描述】：
我正在尝试将响应式绝对定位图像放置在相对 div 中。我在两次潜水周围放置了边界以可视化问题。右边那个不包。另外，我想将图像导航保留在图像中间。
主要目标是保持包装 div 响应和包装图像的大小 - 当图像大小在窗口调整大小时发生变化时。
在这里您可以在 codepen 中看到问题 - http://codepen.io/GlupiJas/pen/PwrLbb
advert.css
body{
}
.wrapper{
width: 80%;
margin: 100px auto;
}
.advert{
position: relative;
height: 100%;
}
.advert img{
position: absolute;
}
.advert button{
position: absolute;
visibility: hidden;
}
.advert:hover button{
visibility: visible;
}
.advert button#advertCloseButton{
top: 0px;
right: 0px;
}
.advert button#advertNextButton{
bottom:50%;
left:0px;
}
.advert button#advertPreviousButton{
bottom:50%;
right:0px;
}
.advert button#advertStopButton{
bottom:0px;
right:0px;
}
.advert button#advertPlayButton{
bottom:0px;
right:0px;
}
.border{
border: 1px solid gray;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title of the document</title>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Bootstarp 3 Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Bootstarp 3 Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Bootstarp 3 Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- custom css -->
<link rel="stylesheet" type="text/css" href="advert.css">
<script src="js/advert.js"></script>
</head>
<body>
<div class="wrapper">
<div class="row">
<div class="col-xs-12 col-md-8 border">
.col-xs-12 .col-md-8
</div>
<div class="col-xs-12 col-md-4 border">
<div class="advert">
<img class="img-responsive" src="http://placehold.it/300x300.jpg" alt="Smiley face" height="" width="100%">
<img class="img-responsive" src="http://placehold.it/300x300.jpg" alt="Smiley face" height="" width="100%">
<img class="img-responsive" src="http://placehold.it/300x300.jpg" alt="Smiley face" height="" width="100%">
<button id="advertCloseButton" type="button" class="btn btn-danger">X</button>
<button id="advertNextButton" type="button" class="btn btn-danger">></button>
<button id="advertPreviousButton" type="button" class="btn btn-danger"><</button>
<button id="advertStopButton" type="button" class="btn btn-danger">pause</button>
<button id="advertPlayButton" type="button" class="btn btn-danger">play</button>
</div>
</div>
</div>
</div>
</body>
<script>
$(function(){
advert({
closeButton: true,
navButton: true,
timeToShow: 100,
timeDelay: 1000,
timeToFade: 100
});
});
</script>
</html>
【问题讨论】：
-
当你绝对定位一个元素时，它会从文档流中取出，并且不会影响其父元素的尺寸。也许绝对定位不是你应该考虑实现特定布局的？
-
也许或者......我可以使用 javascript/jQuery 来确定它的实际大小，这将继续检查图像 bing 的大小变化并分别更改包装 div 的大小？
-
这是可能的，但您可能需要重新考虑您真正想要通过布局实现什么。您是否正在尝试为广告创建各种图像滑块？使用 JS 是可能的，但不必要地复杂，因为请记住您的图像尺寸是响应式的，因此每次调整视口大小时都必须重新计算高度。
-
有两种可能的方法，height:100% 或 height 百分比，需要从顶部 开始设置到每个父容器，或者为图像容器设置一个固定的高度。跨度>
-
如果我在图像上设置了固定高度，我将失去 resposivnes - 我不想这样做。
标签： css twitter-bootstrap css-position responsiveness