Question

所以我想出了这段代码：

<head>
<style type="text/css">
div.img
{
  margin: 2px;
  border: 1px solid #0000ff;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}
div.img img
{
  display: inline;
  margin: 3px;
  border: 1px solid #ffffff;
}
div.img a:hover img {border: 1px solid #0000ff; width:auto; height:auto}

</style>
</head>
<body>

<div class="img">
 <a target="_blank" href="a"><img src="images/p1.jpg" alt="a" width="110" height="90" /></a>
</div>
<div class="img">
 <a target="_blank" href="b"><img src="images/p2.jpg" alt="b" width="110" height="90" /></a>
</div>
<div class="img">
 <a target="_blank" href="c"><img src="images/p3.jpg" alt="c" width="110" height="90" /></a>
</div>
<div class="img">
 <a target="_blank" href="d"><img src="images/p4.jpg" alt="d" width="110" height="90" /></a>
</div>

</body>
</html>

我的目标是制作一个简单的画廊，当鼠标放在上面时图像被放大，一切都好，但现在我想制作精确的尺寸 - 我的意思是一个盒子，让我们说600x300px因为现在需要整个监视器，我想我需要调整CSS但不知道如何。

Answer 1

我不确定你在问什么，但下面的代码是否符合你的要求？

div.img a:hover img {
    border: 1px solid #0000ff;
    width:600px;
    height:300px
}

Answer 2

如果要将图像包装在容器div中，请执行以下操作：

<div id="container">
    <div class="img">
       ...
    </div>
    ...
</div>

CSS：

 #container { width: 600px; height: 300px; overflow: auto; }

这将为您提供一个带滚动的漂亮框，具有指定的尺寸。如果您不需要滚动和固定高度，请不要指定高度并使用所需的overflow: hidden，因为里面的元素是浮动的（这将使容器占用浮动div的占用空间）。 / p>

简单的画廊与CSS问题，在块中显示

2 个答案: