Масштабировать изображение в HTML

Question

У меня есть div в html, который должен содержать 10 равных div внутри внутри с некоторыми изображениями и текстом. Моя высота и ширина div в процентах. Я должен поместить некоторые изображения в те divs, но проблема в том, что я не знаю, как рассчитать, какая высота x ширина изображений мне нужна. Изображения должны быть бинговыми шарами, и я сделал шары размером 128x128.

Это мой Fiddle, div с белой рамкой должен содержать изображение и изображение should scale с div.

Div с зеленой границей должно иметь 10 divs с синей рамкой. Каждый div с синей рамкой должен иметь div с белой рамкой (изображение div) и div с красным цветом (некоторый текст, который должен быть справа от изображения).

Все, что я пробовал, было неудобным.

Answer 1

Я принял ваше изображение здесь: http://tinypic.com/r/103d995/5 и сделал пример, который растягивается и сохраняет свою долю.

Live demo (click).

Пример разметки:

<ul> 
    <li><img src="//placehold.it/50x50"><span>Some Text</span></li> 
    <li><img src="//placehold.it/50x50"><span>Some Text</span></li> 
    <li><img src="//placehold.it/50x50"><span>Some Text</span></li> 
    <li><img src="//placehold.it/50x50"><span>Some Text</span></li> 
    <li><img src="//placehold.it/50x50"><span>Some Text</span></li> 
    <li><img src="//placehold.it/50x50"><span>Some Text</span></li> 
    <li><img src="//placehold.it/50x50"><span>Some Text</span></li> 
    <li><img src="//placehold.it/50x50"><span>Some Text</span></li> 
    <li><img src="//placehold.it/50x50"><span>Some Text</span></li> 
    <li><img src="//placehold.it/50x50"><span>Some Text</span></li> 
    </ul> 

CSS:

ul { 
    list-style: none; 
    font-weight: bold; 
    margin: 0; 
    padding: 0; 
    width: 15%; 
    white-space: nowrap; 
} 

li { 
    float: left; 
    clear: both; 
    border: 10px solid black; 
    margin: 0; 
    padding: 0; 
    background: lightblue; 
    width: 100%; 
    min-width: 100px; 
} 

li img { 
    vertical-align: middle; 
    height: auto; 
    width: 25%; 
} 

li span { 
    width: 75%; 
    text-align: center; 
    display: inline-block; 
} 

Если вы хотите также масштабировать текст, проверить новый CSS3 vw ип он или для старых браузеров, используйте javascript. Там есть сценарий под названием bigText, который вас может заинтересует.