Фоновое изображение на DIV с процентом

Question

Я пытаюсь узнать о DIV с процентными размерами и фоновым изображением. Итак ...

.mydiv 
{ 
float: left; 
width: 20%; 
background-image: url('myimage.png'); 
padding-bottom: 20%; 
background-size: cover; 
-moz-background-size: cover; /* Firefox 3.6 */ 
background-position: center; /* Internet Explorer 7/8 */ 
} 

мнение не тааак плохо. Во всяком случае, я хотел бы улучшить его, для отзывчивого сайта.

myimage.png >> 1920 х 964

Я искал и нашел некоторые учебники. Но ... Я застрял. Я не хочу использовать javascript для управления размером. Я пытаюсь найти ЛУЧШИЙ способ сделать это с помощью CSS, в основном, чтобы изучить и улучшить представление об изображении в качестве фона

Кто-нибудь может мне помочь? Спасибо!

Answer 1

для отзывчивого фона набор width:100%

примера:

.mydiv 
{ 
float: left; 
width: 100%; 
background-image: url('http://bestinspired.com/wp-content/uploads/2015/03/4-Nature-Wallpapers-2014-1.jpg'); 
background-repeat:no-repeat; 
background-position:center; 
background-size: cover; 
-moz-background-size: cover; /* Firefox 3.6 */ 
background-position: center; /* Internet Explorer 7/8 */ 
} 

jsfiddle

Answer 2

Да ... Но все-таки проблемы между шириной и высотой пропорцией. Я использую теперь нижнюю часть 100%, поэтому я «квадратный div». Не является ли другим способом улучшить представление фонового изображения? Еще раз спасибо! Im пытается учиться: D