изменить размер изображения, используя% в CSS

Я пытаюсь создать ликвидный веб-макет, используя% для максимально возможного количества вещей. Я столкнулся с проблемой при изменении размеров изображений.

и то и другое:

<img src="source" style="width: 20%; height: 20%;"/>

а также

.wall_picture_block img{
width: 20%; 
height: 20%;
}

не работает должным образом с атрибутом высоты. Они увеличивают ширину изображения до 20% от контейнера, но высота остается относительно размера изображения (я пытаюсь сделать квадраты)

Ответы на вопрос(3)

Проценты вheight а такжеwidth Атрибуты изображения работают с контейнером, в котором он содержится. Поэтому для достижения эффекта жидкости просто попробуйте поместить контейнер вокруг img и задать высоту и ширину изображения:100%, и теперь вы должны изменить высоту и ширину контейнера в процентах. Вот пример

<div style="width: 500px; height: 100px;">
   <img src="your-image-link-here" style="height: 100%; width: 100%;">
</div>

С этим ваше изображение достигнет высоты и ширины 500 * 100.

ОБНОВИТЬ

<div id="wrapper" style="border: 1px solid red; width: 900px; height: 400px;">
  <div id="imgcontainer" style="width: 100%; height: 50%;">
     <img src="ur-img" style="height: 100%; width: 100%;">
  </div>
</div>

Пример с оберткой и контейнером с процентами.

 slexAtrukov26 сент. 2010 г., 22:27
все это не отформатировано, но, по сути, да, я использую 2 файла, один для получения всех идентификаторов и один для получения изображения, основанного на том, который отправляется в файл как src для получения этого: <a href = "getImages.php? ImageID = 4 "rel =" lightbox [all] "> <img src =" getImages.php? ImageID = 4 "/> </a>
 slexAtrukov26 сент. 2010 г., 13:19
Что делать, если контейнер является% от оболочки?
 offhell26 сент. 2010 г., 13:26
да, это будет работать. Контейнер является <div> и принимает размеры в любом направлении:% возрастов или пикселей.
 slexAtrukov26 сент. 2010 г., 15:50
Он работает в helloworld с изображениями из папки, но не с изображениями из БД, он по-прежнему создает разные формы. Есть идеи почему?
 slexAtrukov26 сент. 2010 г., 22:19
while ($ i <$ rowNums) {?> <a href="getImages.php?ImageID= <?php echo mysql_result($rslt,$i,"ImageID"); ?> "rel =" lightbox [all] " > <img src = "getImages.php? ImageID = <? php echo mysql_result ($ rslt, $ i," ImageID ");?>" /> </a> <? php $ i ++;
 Meher Ranjan26 сент. 2010 г., 19:57
Можете ли вы выложить часть кода, которая получает изображения из базы данных, возможно, тогда я смогу предложить решение. Если я предполагаю, что вы просто получаете путь к изображению из базы данных и помещаете его в атрибут «src» изображения, тогда проблем быть не должно.

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

 hpy20 февр. 2011 г., 14:41
Я попытался использовать% для ширины / высоты, но мой браузер НЕ сохраняет соотношение сторон! (Я использую Firefox 3.6) Как я могу изменить приведенный выше код, чтобы изображения сохраняли соотношение сторон? Благодарю.

чтобы ширина изображения была в процентах от его контейнера, и чтобы изображение сохраняло свое исходное соотношение сторон, определите ширину в процентах и ​​установите высоту на auto:

.wall_picture_block img{
    width: 20%; 
    height: auto;
}
 alexp01 авг. 2011 г., 00:17
О, я предположил, что оригинальные изображения были квадратами, но, возможно, это не так.
 Toby Allen29 июл. 2011 г., 21:43
Это то, чего он не хочет, Алекс.

Ваш ответ на вопрос