Вопрос по css, image – Масштабировать изображение с помощью CSS как по ширине, так и по высоте, чтобы масштабировать

6

Ограничительная рамка составляет примерно 1000x600, а некоторые изображения имеют размер 500x100, в то время как другие - 400x100 (крайние примеры). Теперь я хотел бы масштабировать до максимального размера ограничивающая рамка может обрабатывать, но держать их в масштабе.

<code>img {
  width: 100%;
  height: 100%;
}
</code>

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

Вы спрашиваете, как масштабировать все изображения до размера контейнера, сохраняя пропорции? Josh Davenport
@JoshDavenport точно. Reactormonk

Ваш Ответ

6   ответов
6

изменить ширину вида, сохранить соотношение сторон изображения с помощью CSS) и статья List Apart (http://alistapart.com/article/fluid-images) и собрать все это вместе.

Если ваша разметка такая ...

<img src="myImg.jpg" />

... тогда просто констатирую

img {
    width:100%
}

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

<img src="myImg.jpg" width="400" height="400" />   

... которая, как предполагается, является лучшей техникой, тогда разметка будет просвечивать через CSS, сохраняя изображение на фиксированной высоте, но с гибкой шириной (ург!), если вы не скажете иначе с чем-то вроде

img {
    width:100%;
    height:inherit;
}

...или же...

img {
    width:100%;
    height:auto;
}

Оба, кажется, работают и заставляют изображение вернуться в правильный аспект.

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

Error: User Rate Limit Exceeded
0

Вы не можете так делать. Вы можете редактировать элементы изображенияwidth а такжеheight атрибуты ...

<!-- keeps width-height ratio -->
<img src="smiley.gif" alt="Smiley face" height="50" /> 

<!-- keeps width-height ratio -->
<img src="smiley.gif" alt="Smiley face" width="50" />

<!-- does not keep width-height ratio, unless your image is square -->
<img src="smiley.gif" alt="Smiley face" height="50" width="50" /> 

Вы можете установитьwidth а такжеheight в пикселях или процентах. Обратите внимание, что вам не нужно писатьpx при использовании пикселей, но выdo должен написать% при выполнении процентов. Таким образом, вы можете сделать что-то вроде ...

<img src="smiley.gif" alt="Smiley face" height="100%" width="100%" />

... but that will take 100% of the width and height of the parent element, Поэтому убедитесь, что вы знаете, что такое родительский элемент и его размеры.

width а такжеheight атрибуты должны быть указаны в пикселях CSS - проценты не действительны
да...w3.org/TR/html4/struct/objects.html#adef-height-IMGError: User Rate Limit Exceeded
0

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

По сути, вам просто нужно содержать<img> и укажите размеры для этого контейнера, чем применитьmax-width:100% к<img> и он будет адаптироваться. Прочитайте остальную часть статьи для ознакомления с IE (к счастью, IE7 + поддерживает это).

1

Установка только ширины или высоты не всегда работает, поэтому в качестве альтернативы вы можете установить:

img {
  max-width: 100%;
  max-height: 100%;
}

НО

это не будет расширять изображения по сравнению с их оригинальным размером

0

есть ли способ сделать это только с помощью CSS. Если вы хотите достичь чего-то вродеэтот тогда вы можете использоватьSupersized

Alternatively, если вы не заботитесь о старых браузерах, вы можете заглянуть в CSS3background-size имущество. В частности, я думаю, что установкаbackground-size: cover сделает свое дело.

Edit - Я неправильно понял. То, что вы могли бы на самом деле хотите,background-size: containНо недостатком является то, что вам, вероятно, придется изменить разметку HTML, а не только CSS.

Error: User Rate Limit Exceeded Reactormonk
5

.

img {
    width: 100%;
}

или же

img {
    height: 100%;
}

Это сохранит масштаб изображения, но изображение может переполнить контейнер.

Это может работать не во всех браузерах, но в последних версиях Firefox, Chrome и Opera. У меня был странный опыт с этим в прошлом, и я решил вычислить новый размер изображения на сервере.

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