CSS изображение изменить размер в процентах от себя? - PullRequest
Новая
       28

CSS изображение изменить размер в процентах от себя?

91 голосов
/ 06 декабря 2011

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

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

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

Ответы [ 10 ]

98 голосов
/ 25 мая 2012

У меня есть 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% от исходного размера изображения.
37 голосов
/ 30 июля 2014

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%;
}

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

10 голосов
/ 06 декабря 2011

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

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

Редактировать: Судя по всему, FireFox не поддерживает zoom свойство.Вы должны использовать; 

-moz-transform: scale(0.5);

для FireFox.

4 голосов
/ 20 января 2018

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

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

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

2 голосов
/ 02 апреля 2018

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

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

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

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

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

2 голосов
/ 31 мая 2013

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

<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 встроенным блоком.

0 голосов
/ 28 мая 2019

На самом деле большинство ответов здесь на самом деле не масштабируют изображение до ширины самого .

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

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

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

<figure>
    <img src="your-image@2x.png" />
</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%);.

0 голосов
/ 28 мая 2018

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

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

then in css:
div {
    position: absolute;
}

img, div {
   width: ##%;
   height: ##%;
}
0 голосов
/ 23 марта 2016 
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 и изменяет размеры, основываясь только на свойствах изображения, а не на родительском. Он может изменить размер одного изображения или группы, используя параметры класса и id.

для получения дополнительной информации, перейдите сюда: https://gist.github.com/jennyvallon/eca68dc78c3f257c5df5

0 голосов
/ 25 мая 2012

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

Edit:

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

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%;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...