Question

假设我们的可见区域为300 x 200像素
假设我们有任何尺寸的图像。它可以比可见区域更大或更小。

问题：

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

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

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

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

mercator已完成部分作业here，如下所述：

如果你换行，你可以使它工作图像周围的另一个元素：
<div class="outer">
  <div class="inner"><img src="" alt="" /></div>
</div>
以下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%;
}
position: relative 'outer标有*，所以它会仅适用于IE6 / 7。你可以移动它到条件IE样式表if 这是你喜欢的，或删除完全*。这是需要避免的现在相对定位的孩子从溢出。

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

这将创建一个300x200px的div，带有1px红色边框。然后，它将在垂直和水平居中的div中定位图像，或者默认为白色，无法找到图像。

Answer 2

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

您可以通过提供margin-left = margin-right = auto来将图片置于可见区域中心。

css：图像被块裁剪。在可见区域周围绘制边框。不切实际的问题

2 个答案: