放大边框的图像

Question

我有一个网格，其中包含大量带有模拟html的图像，如下所示：

<div style="width: 200px;">
  <img src="image.jpg" style="width: auto;" />
<div>

问题是，容器div有一个固定的宽度，图像的宽度在它们之间有所不同，所以我最终得到了一些带有白色＆＃34;填充的容器＆＃34;在其内部图像的左侧和右侧，因为它们的内部图像不完全适合容器宽度。我想制作类似于下图的内容，也就是说，当图像不适合宽度时，我会在两侧显示缩放的边框。

Answer 1

这可以通过在每个包装器中插入两个图像来实现。一个用于模糊背景，一个用于主图像。此外，我们使用常规<img>代替使用<div>标记，以便在图像显示方面具有更大的灵活性。

<div class="wrapper">
  <div class="background" style="background-image: url('...')"></div>
  <div class="image" style="background-image: url('...')"></div>
</div>

包装器必须是定位元素（即position设置为除static之外的任何内容），以便给定position: absolute;的子项将相对于包装器定位。包装器还必须隐藏任何溢出。

.wrapper {
  position: relative; /* Required */
  overflow: hidden;   /* Required */
  width: 400px;       /* Arbitrary */
  height: 500px;      /* Arbitrary */
}

接下来，子元素将被绝对定位并覆盖包装的整个宽度和高度。您必须确保<div class="background">位于HTML中<div class="image">之前，否则您必须在CSS中的每个元素上明确设置z-index以确保<div class="image">为渲染在上面。

/* Required */
.background,
.image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: center center;
}

现在对于div.background，我们会将其放大到比容器宽1.5倍，添加滤镜来模糊图像并略微降低不透明度。您可以调整这些以达到您想要的效果。

/* Personal Preference */
.background {
  background-size: 150% auto;
  filter: blur(10px);
  opacity: 0.9;
}

设置background-size的{​​{1}}时，请确保仅指定一个尺寸的尺寸，以便图像保持其纵横比。 e.g：

div.background

最后，对于/* Good */ .background { background-size: 200% auto; } .background { background-size: auto 200%; } /* Bad */ .background { background-size: 200% 200%; } ，我们只需要告诉它如何缩放主图像。这两个选项既保留了图像的纵横比，又提供了不同的尺寸调整结果：

div.image

将所有这些结合在一起作为例子：

＆＃13;

＆＃13;

.image {    
  /* Will only scale as large as the image itself */
  background-size: auto;
}

/* OR */

.image {    
  /* Scales until image hits one of the sides of the container */
  background-size: contain;    
}

＆＃13;

body {
  background: #222; 
}

.wrapper {
  position: relative;
  width: 400px;
  height: 500px;
  overflow: hidden;
}

.background,
.image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: center center;
}

.background {
  background-size: 150% auto;
  filter: blur(10px);
  opacity: 0.9;
}

.image {
  background-size: contain;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以将图像用作div的背景，并使用一些CSS使背景拉伸，然后在其上方添加叠加层：

.box {
  border:1px solid;
  width:400px;
  height:300px;
  background-size:200% 200%;
  background-position:center;
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  background:rgba(255,255,255,0.5);
  top:0;
  bottom:0;
  left:0;
  right:0;
}
img {
 display:block;
 margin:auto;
 max-width:100%;
 max-height:100%;
 position:relative;
 z-index:2;
}

<div class="box" style="background-image:url(https://lorempixel.com/200/400/)">
  <img src="https://lorempixel.com/200/400/" >
<div>