Как я могу сделать изображение заполнить весь контейнер?

Question

Я хочу, чтобы изображение всегда заполняло ширину и высоту.

Я использую LayerSlider WP плагин, так что я установить ширину 100% в его настройках, а также width: 100% !important в поле, которое говорит «Custom CSS»

PS: Это ссылка http://www.draidel.com.ar/novedades (вы видите, я добавил очень маленькое и квадратное изображение на первом слайде и более широкое изображение для второго, но все равно не заполняет всю ширину)

Спасибо!

Answer 1

Вам необходимо установить min-height и min-width из ваших img быть 100%. Но вам также необходимо установить его height и width на номер auto, чтобы сохранить его соотношение сторон, независимо от размера экрана или ориентации. Если вы также захотите центрировать img в своем родителе, если его высота или ширина превышают его родительский, тогда вам нужно будет использовать position:absolute, чтобы установить его позиции left и top на 50%, а затем использовать функцию transform, чтобы вытащить их назад на 50% снова. Вот пример:

*{box-sizing:border-box;margin:0;padding:0;} 
 
figure{ 
 
    bottom:0; 
 
    left:0; 
 
    position:fixed; 
 
    right:0; 
 
    top:0; 
 
} 
 
img{ 
 
    display:block; 
 
    height:auto; 
 
    min-height:100%; 
 
    left:50%; 
 
    position:absolute; 
 
    top:50%; 
 
    transform:translate(-50%,-50%); 
 
    width:auto; 
 
    min-width:100%; 
 
}

<figure><img src="http://draidel.com.ar/wp-content/uploads/2016/01/website-647013_1280.jpg"></figure>

Answer 2

Вы пробовали это в файле стилей?

img.ls-preloaded{ 
width:100%!important; 
}