Как уменьшить изображение css

CSS Image resize процент от себя?

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

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

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

9 ответов

у меня есть 2 способа для вас.

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

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

HTML-код:

css:

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

Способ 2. демо на jsFiddle

HTML-код:

css:

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

метод работает в этом путь:

  1. ‘#wrap ‘ и ‘ #wrap img.поддельные’ у flow
  2. #wrap и overflow: hidden установить #wrap размеры идентичны внутреннему изображению ( img.fake )
  3. img.fake это только один элемент без absolute или fix в должности #wrap чтобы не нарушить результат второго шага.
  4. #img_wrap и absolute установки внутри #wrap и расширен по размеру до всего элемента ( #wrap )
  5. результат четвертого шага #wrap_img те же размеры, что и изображение.
  6. используя responsive images метод set width: 50%; of img.normal и теперь вы получили ваш результат.

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

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

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

Edit: как упоминалось trojan, вы также можете воспользоваться недавно введенным CSS3 внутренний и внешний модуль калибровки:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *