Я пытаюсь настроить электронную почту моей компании, чтобы быть более мобильным. И, к сожалению, потому что это основано на адресах электронной почты, мне приходится создавать `em, как в 1999 году: таблицы и фрагменты изображений, в основном.Отзывчивое масштабирование изображений в ячейках таблицы вызывает пробелы в Chrome
У меня есть таблицы, которые заданы для определенной ширины, без определенной высоты. Не более одной строки в таблице и обычно 2-3 столбца. Одно изображение на ячейку таблицы. В настоящее время я не определяю размеры ячеек таблицы или изображений.
Вот мой новый отзывчивым код, я работаю над:
@media (max-width: 670px) {
body {
background-color: red !important; /* for testing */
}
table {
width: 100% !important;
height: auto !important;
}
table img {
width: 100% !important;
height: auto !important;
}
}
@media (max-width: 480px) {
body {
background-color: blue !important; /* for testing */
}
}
http://codepen.io/BevansDesign/pen/CnAfB
Как вы можете видеть на моей странице Codepen, если уменьшить ширину окна, графика будет сокращаться вниз соответственно. Однако в Chrome у меня много разбросов между изображениями (зеленые линии), из-за того, что масштабирование на основе пикселей немного странно. (Отлично работает в FF, конечно, не работает в IE8, и я еще не тестировал его ни на что еще.)
Кто-нибудь знает, как я могу избавиться от этих пробелов? Я попытался установить высоту изображения на 100%, но это просто оставляет изображения на их первоначальной высоте и сжимает их по горизонтали.
Я знаю, что могу исправить это, установив все размеры вручную, но я ищу решение с минимальной настройкой, так как я отказываюсь от этих писем 2-3 раза в неделю.
Благодарим за помощь!
Спасибо, я попробовал несколько из тех, кто в прошлом, когда лишние пробелы выскочили в сообщениях электронной почты (именно поэтому у меня есть все, что в таблице однорядной, с каждым изображением в своей собственной ячейке). Однако эта проблема возникает только при попытке масштабирования изображений. – BevansDesign
Если я масштабирую столы до 57% (просто чтобы выбрать номер в случайном порядке), это делает ширину стола шириной 650 пикселей шириной 370,5 пикселей, хотя Chrome округляет ее до ближайшего пикселя. Таким образом, 3 изображения (200x344, 213x344 и 217x344) заканчиваются разной высотой (114x196, 121x195, 124x197). Поэтому я ищу способ рассказать браузеру о масштабировании их всех на высоту таблицы. – BevansDesign