как создать пропорциональную высоту / ширину изображения - PullRequest
Новая
       3

как создать пропорциональную высоту / ширину изображения

14 голосов
/ 01 августа 2010

Итак, я хочу изменить размер изображения до 30% от его первоначальной высоты / ширины. Представьте, что вы не знаете его высоту или ширину. Как бы вы это использовали, используя только CSS / HTML?

Ответы [ 2 ]

36 голосов
/ 10 февраля 2012

Если вам нужно быстрое встроенное решение: 

<img style="max-width: 100px; height: auto; " src="image.jpg" />
29 голосов
/ 01 августа 2010

Обновление:

Используя оболочку display: inline-block;, это можно сделать только с помощью CSS.

HTML 

<div class="holder">
    <img src="your-image.jpg" />
</div>

CSS 

.holder {   
  width: auto;
  display: inline-block;    
}

.holder img {
  width: 30%; /* Will shrink image to 30% of its original width */
  height: auto;    
}​

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

Вот демоверсия в действии .

К сожалению, нет чистого HTML / CSS-способа сделать это, так как ни один не предназначен для выполнения подобных вычислений. Тем не менее, это довольно просто с фрагментом jQuery: 

$('img.toResizeClass').each(function(){

    var $img = $(this),
        imgWidth = $img.width(),
        imgHeight = $img.height();

    if(imgWidth > imgHeight){
        $img.width(imgWidth * 0.3);
    } else {
        $img.height(imgHeight * 0.3);
    }
});
...