Резиновые фотографии в шаблоне
Приветствую экспертов. Очень нужен совет. Использую дефолтный адаптивный шаблон. Не могу решить проблему вставки трех фотографий в ряд по горизонтали. Текстовый редактор страницы даёт возможность HTML форматирования. Как его средствами решить задачу. Чтобы фотки на смартфоне не вылезали за пределы верстки. В моём варианте фотки на компе отображаются нормально (резиново). На смартфоне сжимаются, но вылетают за верстку. Нужно найти способ полностью резиновых фотографий. Чтобы они корректно уменьшались и увеличивались. Хорошо смотрелись во всех разрешениях. Подскажите. Кто такую задачу решил. Пожалуйста, дайте ссылку на страницу. Я разберусь. Пока не понимаю, откуда начинать решать. Спасибо.
<table width="100%" border="0" cellspacing="1" cellpadding="1" align="center">
<tbody>
<tr>
<td width="33%" style="border-width: 0px;border:none none;">
<p><img src="/wa-data/public/shop/img/20070704130720371-1.jpg" width="294" height="450" alt="Варианты исполненных работ с полимерными накладками" style="width: 294px; height: 450px; float: left; margin: 0px 10px 10px 0px;">
</p>
</td>
<td width="33%" style="border-width: 0px;border:none none;">
<p><img src="/wa-data/public/shop/img/20070807123121297-1.jpg" width="287" height="450" alt="Наши исполненные работы с применением полимерных накладок" style="width: 287px; height: 450px; float: left; margin: 0px 10px 10px 0px;">
</p>
</td>
<td width="33%" style="border-width: 0px;border:none none;">
<p><img src="/wa-data/public/shop/img/20070807123433766-2.jpg" width="306" height="450" alt="Убранство арнамента интерьера с полимерными накладками" style="width: 306px; height: 450px; float: left; margin: 0px 10px 10px 0px;">
</p>
</td>
</tr>
</tbody>
</table>
4 ответа
http://www.shop-script.ru/showcase/ поставьте режим просмотре телефон и посмотрите примеры темы кто и как реализовывал
Спасибо за участие в проблеме. Но в штатных шаблонах решения быть не может. Чтобы объяснить приведу пример кривой реализации. По ссылке http://stb-interio.ru/uslugi/ можно видеть, что фотки сжимаются не пропорционально. Если смартфон повернуть по горизонтали, то крайняя правая фотография вылетает за верстку. Почему не пойму.
<style> table img { width:100%; max-width:300px; } </style> <table width="100%" border="0" cellspacing="1" cellpadding="1" align="center"> <tbody> <tr> <td width="33%" style="border-width: 0px;border:none none;"> <p><img src="http://stb-interio.ru/wa-data/public/shop/img/20070704130720371-1.jpg" alt="Варианты исполненных работ с полимерными накладками"> </p> </td> <td width="33%" style="border-width: 0px;border:none none;"> <p><img src="http://stb-interio.ru/wa-data/public/shop/img/20070807123121297-1.jpg" alt="Наши исполненные работы с применением полимерных накладок"> </p> </td> <td width="33%" style="border-width: 0px;border:none none;"> <p><img src="http://stb-interio.ru/wa-data/public/shop/img/20070807123433766-2.jpg" alt="Убранство арнамента интерьера с полимерными накладками"> </p> </td> </tr> </tbody> </table>Гениально. Спасибо. Работает.