Как сделать чтобы css не обрезал картинку по высоте?
Есть картинка. Когда указываю background-size: cover; , то картинка обрезается по высоте. Посоветуйте, что сделать, чтобы картинка не обрезалась по высоте на больших экранах, а на маленьких она сжималась по ширине
.your_div{
background-size: auto 100%; /* ширина высота */
}
/*---- Медиа запрос для мобильных устройств ----*/
@media all and (max-width: 768px){
.your_div{
background-size: 100% auto; /* ширина высота */
}
}
Если будут какие то проблемы с отображением можно еще поиграть с
background-position: 50% 50%; /* ширина высота */
