Размер изображения CSS изменяется от самого себя?

Я пытаюсь изменить размер img с процентом самого себя. Например, я просто хочу уменьшить изображение наполовину, изменив его размер до 50%. Но применение width: 50%; приведет к изменению размера изображения на 50% от элемента контейнера (родительский элемент, который может быть, например, <body>).

Вопрос: могу ли я изменить размер изображения с процентом самого себя, не используя javascript или сервер? (У меня нет прямой информации о размере изображения)

Я уверен, что вы не можете этого сделать, но я просто хочу посмотреть, есть ли интеллектуальное решение только для CSS. Спасибо!

ОТВЕТЫ

Ответ 1

У меня есть 2 метода для вас.

Способ 1. Демо на jsFiddle

Этот метод изменяет размер изображения только визуально, не по фактическим размерам в DOM, а по визуальному состоянию после изменения размера по центру в середине исходного размера.

HTML:

<img class="fake" src="example.png" />

CSS:

img {
  -webkit-transform: scale(0.5); /* Saf3.1+, Chrome */
     -moz-transform: scale(0.5); /* FF3.5+ */
      -ms-transform: scale(0.5); /* IE9 */
       -o-transform: scale(0.5); /* Opera 10.5+ */
          transform: scale(0.5);
             /* IE6–IE9 */
             filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');
}​

Примечание о поддержке браузера : статистика браузеров показывается как встроенная в css.

Способ 2. Демонстрация на jsFiddle

HTML:

<div id="wrap">
    <img class="fake" src="example.png" />
    <div id="img_wrap">
        <img class="normal" src="example.png" />
    </div>
</div>​

CSS:

#wrap {
    overflow: hidden;
    position: relative;
    float: left;
}

#wrap img.fake {
    float: left;
    visibility: hidden;
    width: auto;
}

#img_wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#img_wrap img.normal {
    width: 50%;
}​

Примечание: img.normal и img.fake - это одно и то же изображение.
Примечание о поддержке браузера: этот метод будет работать во всех браузерах, поскольку все браузеры поддерживают свойства css используемые в методе.

Метод работает следующим образом:

  1. #wrap и #wrap img.fake имеют поток
  2. #wrap имеет overflow: hidden так что его размеры идентичны внутреннему изображению (img.fake)
  3. img.fake - единственный элемент внутри #wrap без absolute позиционирования, чтобы не нарушать второй шаг
  4. #img_wrap имеет absolute позиционирование внутри #wrap и распространяется на размер всего элемента (#wrap)
  5. Результатом четвертого шага является то, что #img_wrap имеет те же размеры, что и изображение.
  6. При установке width: 50% для img.normal, его размер составляет 50% от #img_wrap и, следовательно, 50% от исходного размера изображения.

Ответ 2

HTML:

<span>
    <img src="example.png"/>
</span>

CSS:

span {
    display: inline-block;
}
img {
    width: 50%;
}

Это должно быть одним из самых простых решений, использующих подход с использованием контейнерных элементов.

При использовании подхода контейнерных элементов этот вопрос является вариацией этого вопроса. Хитрость заключается в том, чтобы позволить элементу контейнера сжать дочернее изображение, чтобы оно имело размер, равный размеру изображения без размера. Таким образом, при установке свойства width изображения в виде процентного значения изображение масштабируется относительно его исходного масштаба.

Некоторые из других свойств и значений свойств, поддерживающих сжатие: float: left/right, position: fixed и min/max-width, как упомянуто в связанном вопросе. У каждого есть свои побочные эффекты, но безопаснее будет выбрать display: inline-block. Мэтт упомянул float: left/right в своем ответе, но он ошибочно приписал это overflow: hidden.

Демо на jsfiddle

Редактировать: Как упоминал троян, вы также можете воспользоваться недавно введенным модулем внутреннего и внешнего определения размеров CSS3:

HTML:

<figure>
    <img src="example.png"/>
</figure>

CSS:

figure {
    width: intrinsic;
}
img {
    width: 50%;
}

Однако не все популярные версии браузера поддерживают его на момент написания.

Ответ 3

Попробуйте zoom свойство

<img src="..." style="zoom: 0.5" />

Изменить: По-видимому, FireFox не поддерживает свойство zoom. Вы должны использовать;

-moz-transform: scale(0.5);

для FireFox.

Ответ 4

Другое решение заключается в использовании:

<img srcset="example.png 2x">

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

Ответ 5

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

<div class="wrapper">
  <div class="box">
    <img src="/logo.png" alt="">
  </div>
</div>

.wrapper { position:relative; overflow:hidden; }

.box { float:left; } //Note: 'float:right' would work too

.box > img { width:50%; }

Переполнение: hidden дает размер и ширину обертки, несмотря на плавающее содержимое, без использования clearfix hack. Затем вы можете разместить свой контент с использованием полей. Вы даже можете сделать оболочку div встроенным блоком.

Ответ 6

Это очень старая тема, но я нашел ее, когда искал простое решение для отображения снимка экрана с высоким разрешением на экране стандартного разрешения.

Таким образом, есть решение только для HTML для современных браузеров:

<img srcset="image.jpg 100w" sizes="50px" src="image.jpg"/>

Это говорит браузеру, что изображение в два раза больше его предполагаемого размера экрана. Значение пропорционально и не должно отражать фактический размер изображения. Можно также использовать 2w 1px для достижения того же эффекта. Атрибут src используется только в старых браузерах.

Приятным эффектом этого является то, что он отображает тот же размер на сетчатке или стандартном дисплее, уменьшая на последнем.

Ответ 7

function shrinkImage(idOrClass, className, percentShrinkage){
'use strict';
    $(idOrClass+className).each(function(){
        var shrunkenWidth=this.naturalWidth;
        var shrunkenHeight=this.naturalHeight;
        $(this).height(shrunkenWidth*percentShrinkage);
        $(this).height(shrunkenHeight*percentShrinkage);
    });
};

$(document).ready(function(){
    'use strict';
     shrinkImage(".","anyClass",.5);  //CHANGE THE VALUES HERE ONLY. 
});

В этом решении используются js и jquery и изменения размера, основанные только на свойствах изображения, а не на родительском. Он может изменять размер одного изображения или группы на основе параметров класса и идентификатора.

для более, перейдите сюда: https://gist.github.com/jennyvallon/eca68dc78c3f257c5df5

Ответ 8

Это не сложный подход:

<div>
    <img src="sample.jpg" />
</div>

then in css:
div {
    position: absolute;
}

img, div {
   width: ##%;
   height: ##%;
}

Ответ 9

На самом деле большинство ответов здесь не очень масштабировать изображение по ширине самого себя.

Нам нужно иметь ширину и высоту auto для самого элемента img, чтобы мы могли начать с его исходного размера.

После этого элемент контейнера может масштабировать изображение для нас.

Простой пример HTML:

<figure>
    <img src="[email protected]" />
</figure>

А вот и правила CSS. Я использую абсолютный контейнер в этом случае:

figure {
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transform: scale(0.5); 
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5); 
    -o-transform: scale(0.5);
    transform: scale(0.5);
    transform-origin: left;
} 

figure img {
    width: auto;
    height: auto;
}

Вы можете настроить положение изображения с помощью правил, таких как transform: translate(0%, -50%); ,

Ответ 10

Я думаю, что вы правы, это просто невозможно с чистым CSS, насколько я знаю (не кросс-браузер, я имею в виду).

Edit:

Хорошо, мне очень не понравился мой ответ, поэтому я немного озадачился. Я мог бы найти интересную идею, которая могла бы помочь... возможно, это возможно в конце концов (хотя и не самая красивая вещь когда-либо):

Изменить: Протестировано и работает в Chrome, FF и IE 8 и 9., Он не работает в IE7.

Пример jsFiddle здесь

HTML:

<div id="img_wrap">
    <img id="original_img" src="http://upload.wikimedia.org/wikipedia/en/8/81/Mdna-standard-edition-cover.jpg"/>
    <div id="rescaled_img_wrap">
        <img id="rescaled_img" src="http://upload.wikimedia.org/wikipedia/en/8/81/Mdna-standard-edition-cover.jpg"/>
    </div>
</div>

CSS

#img_wrap {
    display: inline-block;       
    position:relative;    
}

#rescaled_img_wrap {
    width: 50%;
}
#original_img {
    display: none;
}
#rescaled_img {
    width: 100%;
    height: 100%;
}