css: image cropped by block. drawing border around the visible area. Untrivial question

问题

suppose we have a visible area 300 x 200 pixels
suppose we have an image of any size. It can be bigger or smaller than the visible area.

Question:

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

回答1:

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>

and css:

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

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.

回答2:

The border, you'll need to draw in another fashion. Simple borders can be added using css. More complex borders and shadows are limited in css and only implemented in some browsers, but you can use javascript to help you add a more complex shadow. There are many snippets and jQuery plugins that can help you.

You can center the image in the visible area by giving it margin-left = margin-right = auto.

来源：https://stackoverflow.com/questions/4974991/css-image-cropped-by-block-drawing-border-around-the-visible-area-untrivial-q

标签

css

border

center