Максимальная ширина CSS не дает пропорционального изменения размера - PullRequest
Новая
       2

Максимальная ширина CSS не дает пропорционального изменения размера

7 голосов
/ 16 октября 2011

У меня узкое представление, в которое я вставляю HTML. Время от времени появляется слишком широкое изображение, поэтому я обернул исходную строку HTML, используя этот CSS, чтобы держать его под контролем: 

<style type="text/css">p{max-width:100%;}img {max-width:100%;}</style>
<div style=\"word-wrap:break-word\">
.
. ...original HTML inside the div wrapper...
.
</div>

Но оно не пропорционально масштабирует ширину и высоту изображений, поэтому в результате получается очень искаженное изображение. Есть ли что-то еще, что я могу сделать, желательно с CSS или что-то такое же простое?

Это встроено в веб-просмотр в приложении iOS. Я не хочу писать код для анализа исходного HTML и поиска изображений. Мне нужно простое решение, которое использует методы, которые поддерживаются классом UIView.

UPDATE:

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

Пример Кайла: 

<div style="word-wrap:break-word">
<img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png">
</div>
<img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png">

Изменено, с шириной и высотой, добавленной к первой ссылке на изображение 

<div style="word-wrap:break-word">
<img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png" WIDTH="100%" HEIGHT="100%">
</div>
<img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png">

Оба используют этот CSS: 

div {width:100px;}
p{max-width:100%;}
img{max-width:100%;}

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

На самом деле, в этом случае (ссылка) похоже, что изображение сначала масштабируется с помощью атрибутов width и height, а затем ширина уменьшается с помощью CSS max-width , Это приводит к очень странному эффекту.

Ответы [ 3 ]

3 голосов
/ 27 августа 2013

Для поддержания правильных пропорций используйте: 

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

height: auto фиксирует пропорции.

1 голос
/ 16 октября 2011

Это действительно просто, просто добавьте ширину к родителю. 

div
{
    width: 100px;
}

Демонстрация здесь .

0 голосов
/ 16 октября 2011

Я не уверен, правильно ли я понял ваш вопрос, но вот идея:

http://jsfiddle.net/FyC6r/4/

.mydiv
{
    width:200px;
    height:150px;
    border: 1px solid red;
}

.mydiv img 
{
    width:100%;
}

<div class="mydiv">
  <img src="http://www.francodacosta.com/wp-content/uploads/resize_200_150.png">
</div>

таким образом, вы будете иметь размер изображения пропорционально зависит от того, чтосначала вам понадобится ширина или высота. оставив только ширину 100% в css, это означает, что размер изображения будет изменен в соответствии с размером div по ширине, а высота будет изменена в то же время, что и ширина, поэтому масштаб будет соблюдаться.

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

...