完全填充浏览器窗口的多列图像
[英]multiple column images that completely fill the browser window
问题描述
我希望有很多可点击的图像来覆盖浏览器窗口的宽度。 所以两边都没有空间。 理想情况下，id应该像单个图像一样保持在180x180px的大小，但是如果更容易，它们可以根据浏览器窗口更改大小。 只需要填充空间。 此刻，如果我使包含的div大于主体，它会在右侧造成空间溢出。 如果这样的话。
这是我的代码： -http : //jsfiddle.net/ZPTBB/
这就是我想要的样子：-http: //www.karen.hunter.myzen.co.uk/pinewood/image_so.jpg
也许需要查询？？？？
提前谢谢你的帮助。
我的代码：-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>
/* Editable Multiple Image Area */
.image-container {width:100%; margin:0; padding:0; height:360px; overflow:hidden;}
.image{position:relative;float:left;width:188px;height:188px; margin:0; padding:0;}
.image img {position:absolute;z-index:1;left:0;top:0;}
.image:hover div {display:block!important; }
.image img:hover div {display:none;position:absolute;z-index:2; width:100%; height:100%; background:red;}
.hoverimg {display:none;position:absolute;z-index:2; width:100%; height:100%; background:red;}
</style>
</head>
<body>
<!-- IMAGE CONTAINER -->
<div class="image-container">
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
<div class="image">
<img src="http://www.placehold.it/188x188" />
<div class="hoverimg"><a href="success.html"><img src="_includes/img/global/image.jpg" width="188" height="188" /></a></div>
</div>
</div><!-- IMAGE CONTAINER -->
</body>
</html>
1 个解决方案
解决方案1
0 已采纳 2013-10-25 09:08:38
添加一些额外的容器，其中可以包含溢出的图像：
.image-container {
width:100%;
height:360px;
overflow:hidden;
}
.image-container-overflow {
width: 100%;
padding-right:187px; /* assuming 188px width for image */
height: 360px;
position: relative;
}
.image-container-actual {
width: 100%;
height: 360px;
position: absolute;
top: 0;
left: 0
}
第一个通过填充占用100％+ 187px，第二个通过绝对定位占用此总数
使用SimpleModal JS创建一个模态来填充浏览器窗口。
[英]Using SimpleModal JS to create a modal to fill the browser window.
如何在不创建滚动条的情况下用画布元素填充浏览器窗口？
[英]How to fill the browser window with a canvas element without creating scroll bars?
如何使InkScape SVG文件填充浏览器窗口并进行交互？
[英]How to make InkScape SVG file fill browser window and be interactive?
页面完全加载后，更改Firefox浏览器的窗口标题
[英]Change window title of Firefox browser after page has been completely loaded
当这两个完全独立时，将window.open对象从1个浏览器传递到另一个浏览器
[英]Pass window.open object from 1 browser to another when these 2 are completely independent
当浏览器窗口完全加载时，使用fadeOut() 或hide() 淡出/隐藏Bootstrap 4 微调器/加载器
[英]using fadeOut() or hide() to fade/hide Bootstrap 4 spinner/loader when browser window is completely loaded
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.