Question

我有一张大图，其大小不为我所知。尺寸因每张图片而异，所以我无法定义图像的宽度和高度。但图像特别是div，我希望它在它的div中，但它溢出并显示在其他图像上方。但是在Dreamweaver中它显示出预期效果。

       http://way2enjoy.com/touch/w2et/photos-slideshow.php/2786608/hill-photo

该div的css是

 .detail_view_m {margin: 0 auto;position: relative;text-align: center;}

任何帮助都将受到高度赞赏

Answer 1

div {
    overflow:hidden;
}

并设置滑动图像的高度和宽度。

Answer 2

这是您的代码。您应该使用div作为图片容器，并为其提供width和height您想要的内容。然后将img放入其中然后为其提供width和height。此代码

<html>
<head>
<title>Welcome !</title>

<style type="text/css">
   div.imagecontainer{
   	width:50%;
   	height: 50%;
   	
   }

   div.imagecontainer img{
   	width: 100%;
   	height: 100%;
   	box-shadow: 1px 2px 1px black;
   }


</style>
</head>

 <body>
  <div class="imagecontainer">
  	<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcREn2n3e1C4jSJE7In1OjHC7ACsa2YDMYZYzzhKUzVz89r9utFZGdRI7CGJ">
  </div>	
 

 </body>

</html>

希望这会对你有所帮助。

Answer 3

您是否需要显示的图像有缩略图（可能是滑块），或者您需要每个div使用它的子图像尺寸？

案例1：设置div的尺寸，使用每个图像都有背景图像并使用background-size：cover;确保每个图像都适合你的div，保持其宽高比

.detail_view_m {
width:400px;
height:400px;
background-size:cover;
}

<div class="detail_view_m" style="background-image:url(http://way2enjoy.com/touch/w2et/photos-slideshow.php/2786608/hill-photo)">
</div>

案例2：显示每个图像都有一个块，你的div将使用这些尺寸

.detail_view_m img{
display:block;
}

Answer 4

试试这个：

.detail_view_m {
 width:400px;
 height:400px;
 overflow:scroll;
  }

这将设置div的尺寸，并在图像超出div的尺寸时启用滚动。

div图像覆盖其他div中的其他图像

4 个答案: