时间戳

首页 > 解决方案 > css img inset box-shadow 技巧 + 中心 (v+h) 锚点 + 最大高度

css - css img inset box-shadow 技巧 + 中心 (v+h) 锚点 + 最大高度

问题描述

我正在尝试应用我在此处找到的技巧在我的画廊图片上添加一个嵌入框阴影，但是，我遇到了 3 个问题：

  1. 然后我不能在他们的容器中垂直和水平地居中图像和周围的锚
  2. 我无法限制图像高度，因此它像我可以垂直地使用最大宽度一样留在所述容器中
  3. 阴影在图像底部溢出了一点

这是我现在的画廊，工作良好但没有盒子阴影：https ://jsfiddle.net/GaetanL/vLrt7o1m/17/

HTML：

<div class="gallery">
  <div class="picture-frame">
    <img src="https://static.passeportsante.net/i93408-.jpeg">
  </div>
  <div class="picture-frame">
    <img src="https://www.wimadame.com/wp-content/uploads/2019/12/La-nature-me-parle.jpeg">
  </div>
</div>

CSS：

body {
  background-color: purple;
}

.gallery {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-start;
}

.picture-frame {
  display: flex;
  background-color: white;
  border-style: solid;
  border-color: lightgrey;
  box-shadow: 6px 6px 6px;
  height: 200px;
  width: 200px;
  margin: 0 36px 36px 0;
  padding: 12px;
  border-width: 1px;
}
.picture-frame img {
  max-width: 100%;
  max-height: 100%; /* for chrome & firefox */
  object-fit: contain; /* for edge */
  margin: auto;
}

到目前为止，这是我到达的地方，显示了上述所有问题：https ://jsfiddle.net/GaetanL/07wmxe6a/24/

HTML：

<div class="gallery">
  <div class="picture-frame">
    <a class="img-shadow">
      <img class="img-image" src="https://static.passeportsante.net/i93408-.jpeg">
    </a>
  </div>

  <div class="picture-frame">
    <a class="img-shadow">
      <img class="img-image" src="https://www.wimadame.com/wp-content/uploads/2019/12/La-nature-me-parle.jpeg">
    </a>
  </div>
</div>

CSS：

body {
  background-color: purple;
}

.gallery {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-start;
}

.picture-frame {
  background-color: white;
  border-style: solid;
  border-color: lightgrey;
  box-shadow: 6px 6px 6px;
  height: 200px;
  width: 200px;
  margin: 0 36px 36px 0;
  padding: 12px;
  border-width: 1px;
}

.img-shadow {
  position: relative;
  float: left;
}

.img-shadow::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: inset 0 0 8px rgba(0,0,0,.6);
    -moz-box-shadow: inset 0 0 8px rgba(0,0,0,.6);
    -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,.6);
}

.img-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  margin: auto;
}

标签： css

解决方案

对于那些感兴趣的人，我找到了答案，我需要指定一个绝对值的最大高度，而不是 %。这是最终版本：https ://jsfiddle.net/GaetanL/07wmxe6a/37/

body {
  background-color: purple;
}

.gallery {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: flex-start;
}

.picture-frame {
  display: flex;
  background-color: white;
  border-style: solid;
  border-color: lightgrey;
  box-shadow: 6px 6px 6px;
  height: 200px;
  width: 200px;
  margin: 0 36px 36px 0;
  padding: 12px;
  border-width: 1px;
}

.img-shadow {
  display: flex;
  position: relative;
  margin: auto;
}

.img-shadow::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    box-shadow: inset 0 0 20px rgba(255,0,0,1);
    -moz-box-shadow: inset 0 0 20px rgba(255,0,0,1);
    -webkit-box-shadow: inset 0 0 20px rgba(255,0,0,1);
}

.img-image {
  max-width: 200px;
  max-height: 200px;
}

推荐阅读