Отображаемое изображение обрезано

Question

Как я могу отобразить изображение со 100% шириной и фиксированной высотой, но без изменения размера. Я имею в виду часть, которая не соответствует обрезанным фиксированным размерам. Например:

Низкое разрешение:

Высокое разрешение:

(не точно, все изображения должны соответствовать одинаковой ширине% и тем же высоту пикселей)

Это может быть код:

HTML:

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

CSS:

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

Answer 1

Это, как я достиг этого:

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

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

Answer 2

Я только что нашел this, и это может помочь вам некоторые из них:

3 Easy and Fast CSS Techniques for Faux Image Cropping

Answer 3

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

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

Answer 4

вы можете использовать text- выравнивание и высота строки на родительском устройстве и сокращение в.п. практически размер изображения с отрицательным запасом: 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 этот вопрос возникает очень часто. Простой способ - это фон, когда изображение не имеет смысла в содержании.