Фоновое размерное изображение для изображения в полной ширине div

Question

При использовании полноэкранного фонового изображения вы можете установить фоновый размер: обложка. Чтобы изображение соответствовало экрану, не теряя качества изображения.

Есть ли аналогичное решение для изображения?

Я использую изображение в полноэкранном div (максимальная высота: 500 пикселей), но при применении полной ширины к изображению высота изображения намного выше (+ 1000 пикселей), так что есть решение, позволяющее этому изображению идеально сочетаться в ширине ширины 100% с максимальной высотой 500 пикселей?

Теперь я использую margin-bottom: -20%, но тогда разрешение изображения дерьмо и увеличено до значительного.

.node-type-article .group-header{ 
    margin: 0 -100% 50px -100%; 
    max-height: 500px; 
} 
.node-type-article .group-header img{ 
    margin-bottom: -20%; 
} 
.node-type-article .l-main{ 
    overflow: visible !important; 
} 

Так что любые предложения? Масштабирование, изменение размера, ...?

Answer 1

С помощью этого решения изображение помещается в ширину 100% и обрезается до 500px Высота:

.node-type-article{ 
    width: 100%; 

} 
.node-type-article .group-header{ 
    width: 100%; 
    max-height: 500px; 
    overflow: hidden; 
} 
.node-type-article .group-header img{ 
    width: 100%; 

} 

Fiddle

Или с этим решением образ также ширина 100%, но его высота растягивается/сжимается до 500 пикселей:

.node-type-article{ 
    width: 100%; 

} 
.node-type-article .group-header{ 
    width: 100%; 
    height: 500px; 
    overflow: hidden; 
} 
.node-type-article .group-header img{ 
    width: 100%; 
    height: 100%; 
} 

Fiddle

Или проверить эту ручку: http://codepen.io/ErwanHesry/pen/JcvCw