Question

所以我想做这个thumbnail effect。

$(window).resize(setThumbHeight);
$(window).resize(centerBtn);

SEE HERE

正如你所看到的，我写了一些JQuery来设置容器高度并将btn居中，我觉得这很愚蠢。

我有几个问题：
1.如何在不使用JQuery的情况下保持容器的宽高比 2.如何使用纯CSS将按钮垂直放在容器内？（似乎有人用桌子和桌子单元完成了它）
3.为什么后台网址不起作用？（我在CSS中注释了该行。）

谢谢你们。

Answer 1

这是一个简单的跨浏览器方法，可以实现您的目标：

http://codepen.io/aecend/pen/KEvBa

我没有打扰任何CSS转换，只专注于居中。要保持容器尺寸，只设置外部缩略图容器的宽度，高度将自动弯曲以适合。此外，背景网址似乎确实有效，图像本身覆盖了小提琴的背景。

<强> HTML

<div class="thumbnail">
  <img src="http://placekitten.com/300/200">
  <div class="mask center-in-container"></div>
  <button class="button center-in-container">Enter</button>
</div>

<强> CSS

.thumbnail {
  width: 30%;
  position: relative;
}
img {
  display: block;
  width: 100%;
  height: 100%;
}
.center-in-container {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
.button {
  width: 50px;
  height: 30px;
  display: none;
}
.mask {
  background-color: rgba(0,0,0,0.3);
  display: none;
}
.thumbnail:hover .button {
  display: block;
}
.thumbnail:hover .mask {
  display: block;
}

Answer 2

您可以使用此技巧垂直居中元素：

如果更改按钮的宽度或高度，则更改保证金值。

-17px是高度的一半，-30px是宽度的一半

.thumbnail-mask .btn{
    position:absolute;
    top:50%;
    left:50%;
    margin:-17px -30px;
}

和缩放图片可以使用：

.my-thumbnail:hover img{
     -webkit-transform:scale(1.5);
     -moz-transform:scale(1.5);
     -o-transform:scale(1.5);
     -ms-transform:scale(1.5);
     transform:scale(1.5);
 }

如果你想用背景css属性显示你的图片，你的容器.my-thumbnail必须有高度。

Answer 3

Hashbug，

除了您使用的JavaScript方法之外，还没有动态，跨浏览器兼容的解决方案，可用于您尝试的操作。

如果你仍然不想使用JavaScript，那就是O.K.如果这不是跨浏览器，那么你可能想看看CSS3的flexbox。正如我所说，所有浏览器版本都不支持flexbox，你可以在这里找到：caniuse.com。我做了一个小提琴，在这里用flexbox更新你的解决方案：

http://jsfiddle.net/jpatterson69/z8uCK/

.thumbnail-mask {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    width: 100%;
    height: 100%;
    text-align: center;
    background: rgba(0,0,0,0.4);    
    opacity: 0;

  -webkit-transition: opacity 0.3s ease-out;
     -moz-transition: opacity 0.3s ease-out;
       -o-transition: opacity 0.3s ease-out;
      -ms-transition: opacity 0.3s ease-out;
          transition: opacity 0.3s ease-out;
}

我没有像其他用户发布的那样包含任何“黑客”，因为它们通常会比你需要的更多的冲突 - 你的解决方案比这些更容易。请问为什么你需要使用flexbox？

使用纯CSS将响应容器内的按钮垂直居中？

3 个答案: