css：按块裁剪的图像。围绕可见区域绘制边框。非日常问题 假设我们有一个300 x 200像素的可见区域 假设我们有一个任意大小的图像。它可以大于或小于可见区域

问题:

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

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

2a.澄清：我想找到（例如）创建第三个div的方法，该div的边框将重复图像可视部分的边框

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

已完成以下部分工作：

如果你把它包起来，你就可以让它工作 图像周围的另一个元素：

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

屏幕上的

位置：相对

'outer
用
*
标记，因此它将
仅适用于IE6/7。你可以移动它
到条件IE样式表，如果
这是您喜欢的，或者删除
*
总共。这是需要避免的
现在处于相对位置的儿童
从溢出

边界，你需要以另一种方式绘制。可以使用css添加简单的边框。更复杂的边框和阴影在css中受到限制，并且仅在某些浏览器中实现，但您可以使用javascript来帮助添加更复杂的阴影。有许多代码片段可以帮助您

您可以将图像置于可见区域的中心，方法是将其设置为
左边距
=
右边距
=
自动
我不确定您的2d澄清是什么意思，但我认为您可以通过以下标记实现这一点：

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

这将创建一个300x200px的
div
，带有1px的红色边框。然后，它会将图像定位在垂直和水平居中的div中，或者默认为白色，因为找不到图像。
要开发html/css以绘制图像可见部分周围的边框，请执行以下操作。我认为这是一个很难的把戏。如果developedsee澄清，它可以成为一种有用的模式。如果图像宽度大于300px，则使用margin:auto时图像不会居中。您可能需要一些javascript。也许最好的解决方案是创建一个固定大小的“可见区域”div，并将图像居中作为背景。然后，在其中创建一个div并将其居中，使用javascript将该div的边框和大小绘制为图像的正确大小，最大大小为。这可以通过背景来解决。这就是我在禁用JS时作为备用项所做的。但是背景没有被谷歌索引（对吗？）。所以我使用JS将图像定位在中心
<div class="outer"></div>

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