0

我想创建一个响应式站点，在该站点中我使用了完整的图像，当我将鼠标放在图像上时，它会出现一个与图像宽度相同的平面颜色 div。现在我用固定宽度做到了这一点，但我想做响应式，即如果我调整浏览器的大小或不同的分辨率，图像会改变它的尺寸，但 div 元素不会。

代码是这样的

<div id="thumbs-cont">
  <div class="thumbnails">
  <img src="images/armin_vit_secrethandshake-325x325.jpg" /> </div>
  <div class="thumb-name"> aaa aa</div>
  <div class="thumb-desc"> ab ab ab</div>
  <div class="thumbnails">
  <img src="images/armin_vit_secrethandshake-325x325.jpg" /> </div>
  <div class="thumb-name"> aaa aa</div>
  <div class="thumb-desc"> ab ab ab</div>
  <div class="thumbnails">
  <img src="images/armin_vit_secrethandshake-325x325.jpg" /> </div>
  <div class="thumb-name"> aaa aa</div>
  <div class="thumb-desc"> ab ab ab</div>
</div>
4

5 回答 5

0

我认为这里的技巧是将父元素的位置设置为相对，这样您就可以将图像的宽度设置为 100%；

.thumbnails {
     position:relative;
}
.thumbnails img {
       width: 100%;
       height:auto;
}
于 2013-07-22T11:51:16.140 回答
0

我想和flexbox你一起可以解决问题。

读这个：

http://learnlayout.com/flexbox.html

于 2013-07-22T11:38:25.863 回答
0

据我了解，您要实现的是图像网格，鼠标上的每个图像都以 div 的形式显示一些信息。使用可下载的项目文件查看本教程，可能会解决您的问题。

http://tympanus.net/codrops/2013/04/17/responsive-full-width-grid/

于 2013-07-22T11:42:29.907 回答
0

好吧，如果你正确地将 :hover 激活的 div 相对于它的父级定位为绝对，你可以简单地将它的宽度和高度设置为 100%，它总是会有很好的尺寸。

尝试从左到右调整预览窗口的大小。您会注意到悬停 div 会根据其父级调整其大小。

于 2013-07-22T15:42:21.863 回答
0

在图像悬停时，您可以执行以下操作：

$('divId').height($(this).height());
$('divId').width($(this).width());

工作小提琴（调整大小和检查）

于 2013-07-22T12:00:11.967 回答