Css 带有放大边框的图像_Css_Image

Css 带有放大边框的图像

css image

Css 带有放大边框的图像,css,image,Css,Image,我有一个网格，其中包含大量的图像和模拟html，如下所示： <div style="width: 200px;"> <img src="image.jpg" style="width: auto;" /> <div> 问题是，container div有一个固定的宽度，并且图像的宽度在它们之间不同，所以我最终得到了一些在其内部图像的左侧和右侧带有白色“padding”的容器，因为它们的内部图像与容器宽度不完全匹配。我想做一些类似于下图的东西，也就是说

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

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

问题是，container div有一个固定的宽度，并且图像的宽度在它们之间不同，所以我最终得到了一些在其内部图像的左侧和右侧带有白色“padding”的容器，因为它们的内部图像与容器宽度不完全匹配。我想做一些类似于下图的东西，也就是说，当图像不适合宽度时，我会在两侧显示一个缩放的边框

这可以通过在每个包装中插入两个图像来实现。一个用于模糊背景，一个用于主图像。此外，我们不使用

标记，而是使用常规的

标记，以便在图像显示上具有更大的灵活性

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

接下来，子元素将被绝对定位，并覆盖包装的整个宽度和高度。您必须确保

位于HTML中的

之前，否则必须在CSS中的每个元素上显式设置

z-index

，以确保

呈现在顶部

/* 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;
}

设置

div.background

的

background size

时，请确保仅指定一维尺寸，以便图像保持其纵横比。e、 g:

/* Good */
.background {
  background-size: 200% auto;
}
.background {
  background-size: auto 200%;
}

/* Bad */
.background {
  background-size: 200% 200%;
}

最后，对于

div.image

，我们只需要告诉它如何缩放主图像。这两个选项都保留了图像的纵横比，但提供了不同的大小调整结果：

.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;    
}

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

正文{
背景：#222；
}
.包装纸{
位置：相对位置；
宽度：400px；
高度：500px；
溢出：隐藏；
}
.背景，
.形象{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
背景重复：无重复；
背景位置：中心；
}
.背景{
背景尺寸：150%自动；
过滤器：模糊（10px）；
不透明度：0.9；
}
.形象{
背景尺寸：包含；
}