На работе приходит ежедневная рассылка по почте. Я конечно могу её удалять (что я и делаю чаще всего), но иногда там может попадаться что-то интересное. Проблема в том, что не всегда удобно читать письмо из-за некорректной вёрстки. Так, например, фотографии или другие изображения рассчитаны явно на мониторы с шириной экрана больше 1920 пикселей.
Чтобы не скроллить по горизонтали каждый раз письмо с таким содержимым, я написал правило для Stylus.
Для изображения с таким 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;
}
- VSCode: Сменить язык интерфейса - 03.05.2024
- C#: Отобразить Unicode символ - 25.04.2024
- UWP: Visual Studio requires a newer version of Windows to display this content - 10.04.2024