css:按 block 裁剪的图像。在可见区域周围绘制边框。不平凡的问题

Question

1. 假设我们有一个 300 x 200 像素的可见区域
2. 假设我们有一张任意尺寸的图片。它可以大于或小于可见区域。

问题:

1.将图像在可见区域内垂直和水平居中。裁剪图像的溢出部分 1a.垂直居中不重要，可以省略

2.在图像的可见部分周围绘制边框。请注意，边框可以匹配外部 div 边框或图像边框

2a.说明:我想找到(例如)创建第三个 div 的方法，其边界将重复图像视觉部分的边界

裁剪与否，在浏览器中必须看到图像可见部分周围的边框

mercator已经完成了一些工作here如下所述:

You can make it work if you wrap another element around the image:

<div class="outer">
  <div class="inner"><img src="" alt="" /></div>
</div>

And the following CSS:

.outer {
  width: 300px;
    height: 200px;
  border: 1px solid red;
  overflow: hidden;
  *position: relative;
}
.inner {
  float: left;
  position: relative;
  left: 50%;
}
img {
  display: block;
  position: relative;
  left: -50%;
}

The position: relative on the 'outer is marked with * so it will only work in IE6/7. You could move it to a conditional IE stylesheet if that's what you prefer, or remove the * altogether. It's needed to avoid the now relatively positioned children from overflowing.

Answer 1

我不确定您的2d 说明是什么意思，但我认为您可以使用以下标记实现此目的:

<div class="outer"></div>

和CSS:

.outer {
    width: 300px;
    height: 200px;
    border: 1px solid red;
    background: #fff url(/path/to/image.jpg) 50% 50% no-repeat;
}

这将创建一个 300x200 像素的 div，带有 1 像素的红色边框。然后它将图像放置在 div 中垂直和水平居中，或者默认为白色，因为找不到图像。