Question

我想创建一个响应式网站，其中我使用了完整的图像，当我将鼠标放在图像上时，它会出现一个与图像宽度相同的平面颜色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>

Answer 1

我认为flexbox你可以解决问题。

阅读本文：

http://learnlayout.com/flexbox.html

Answer 2

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

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

Answer 3

我认为这里的诀窍是将父元素位置设置为相对，这样您就可以将图像的宽度设置为100％;

.thumbnails {
     position:relative;
}
.thumbnails img {
       width: 100%;
       height:auto;
}

Answer 4

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

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

Working fiddle（调整大小并检查）

Answer 5

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

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

如何设置div和图像的相同宽度

5 个答案: