CSS: Установить максимальный размер элемента

На работе приходит ежедневная рассылка по почте. Я конечно могу её удалять (что я и делаю чаще всего), но иногда там может попадаться что-то интересное. Проблема в том, что не всегда удобно читать письмо из-за некорректной вёрстки. Так, например, фотографии или другие изображения рассчитаны явно на мониторы с шириной экрана больше 1920 пикселей.
Чтобы не скроллить по горизонтали каждый раз письмо с таким содержимым, я написал правило для Stylus.

Такое же расширение есть также для Google Chrome и для Opera.

 

Для изображения с таким html-кодом:

<img id="x_Рисунок_abcdefg" style="" width="1358">

Код для Stylus будет следующим:

[id^="x_Рисунок"]
{
max-width: 1000px;
height: auto;
}

Здесь свойство max-width устанавливает максимальную ширину элемента, id которого начинается со строки «x_Рисунок». Но, если оставить только его, то изображения будут сужены, а их высота останется неизменной. Для того, чтобы также изменилась и высота, необходимо добавить второе свойство: height, равное auto.
max-width нужен для того, чтобы не изменялись изображения, у которых ширина меньше 1000 px.

Т.к. проблема была в размере изображений, для большей части которых была установлена минимальная ширина или было значение naturalwidth="1143", то вполне подошёл и такой код:

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


Подписаться
Уведомление о
guest
0 Комментарий
Oldest
Newest Most Voted
Inline Feedbacks
View all comments