css:按块裁剪的图像.在可见区域周围绘制边框.不平凡的问题 [英] css: image cropped by block. drawing border around the visible area. Untrivial question

问题描述

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

问题:

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

1.center the image vertically and horizontally inside the visible area. Crop overflowing parts of the image 1a. vertical centering is unimportant and can be omitted

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

2.draw the border around the visible part of the image. Note that the border can match either the outer div border or image border

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

2a.clarification: I want to find the way of (for example) creating the third div whose borders would repeat the borders of the visual part of the image

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

Cropped or not, in browser has to be seen the border around the visible part of the image

mercator 已经完成了某些工作

mercator has already done some of the job here as described below:

如果包裹起来就可以使它工作 图片周围的另一个元素:

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

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

'outer被标记为*，因此它将 仅适用于IE6/7.你可以移动它 到条件IE样式表，如果 那就是您想要的，或者删除 *总共.需要避免 现在相对定位的孩子 从溢出.

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.

推荐答案

我不确定您对 2d 的解释是什么意思，但是我认为您可以通过以下标记来实现:

I'm not to sure what you mean by your 2d clarification, but I think you can achieve this with the follow markup:

<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中，或者默认为白色，无法找到该图像.

This will create a div of 300x200px with a 1px red border. It will then position an image in the div centered vertically and horizontally, or default to white the image cannot be found.

这篇关于css:按块裁剪的图像.在可见区域周围绘制边框.不平凡的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！