显示图像被裁剪

Question

如何显示宽度为100％且高度固定但未调整大小的图像。我的意思是，不适合固定尺寸的零件要裁剪。 E.g：

低分辨率视图：

高分辨率视图：

（不完全是，所有图像应该适合相同的％宽度和相同的高度像素）

这可能是代码：

HTML：

<a id="image">
    <img src="url" />
</a>

CSS：

#image img {
    width: 100%;
    height: 250px;
}

Answer 1

我刚刚找到this，它可能对你有帮助：

3 Easy and Fast CSS Techniques for Faux Image Cropping

Answer 2

您可以在父级上使用text-align和line-height，并使用负边距减少图像的虚拟大小： http://codepen.io/anon/pen/bqoEg

#image {
  height:200px;
  line-height:200px;/* same value as height, classic method for valign */
  text-align:center;/* horizontal center inline boxe / text */
  width:50%;
  margin:2em auto;
  overflow:hidden;
  border:solid;
}

#image img {
  margin: -250px -100%; /* reduce virtually initial size/space needed for the image */
  vertical-align:middle;/* center it on base-line */
}
/* demo purpose */
#image:hover {
  height:100px;
  line-height:100px;
  margin:50px auto;
}

更多示例：http://codepen.io/gcyrillus/pen/wsjBJ / http://codepen.io/gcyrillus/pen/BdtEj和http://codepen.io/gcyrillus/pen/etxky此问题经常出现。 当图像在内容中没有意义时，简单的方法就是背景。

Answer 3

这就是我实现它的方式：

#image {           /* the parent element */
    float:left;
    overflow:hidden; 
    height: 250px; 
}

#image > img {     /* the image */
    height: auto;
    width: 100%;
}

Answer 4

<div>
    <div class = image> 
       <img src />
    </div>
</div> 

.image {
  position: absolute;
  left: -50%;
  top: -50%;
  }