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

Question

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

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

14

html css image-resizing

задан PizzaPie 1 August 2010 в 00:09

1 ответ

Другие вопросы по тегам:

html css image-resizing

Похожие вопросы:

score 30 · Accepted Answer

Обновление:

Используя обертку 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;    
}

Обертка сворачивается до исходной ширины изображения, а затем width: 30% CSS-правило для изображений заставляет изображение уменьшиться до 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);
    }
});