Резиновые фотографии в шаблоне

Приветствую экспертов. Очень нужен совет. Использую дефолтный адаптивный шаблон. Не могу решить проблему вставки трех фотографий в ряд по горизонтали. Текстовый редактор страницы даёт возможность 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>

1 ответ

  • 1
    Алексей Webasyst 4 июля 2016 22:10 #

    http://www.shop-script.ru/showcase/ поставьте режим просмотре телефон и посмотрите примеры темы кто и как реализовывал

    • +1
      fieldvis fieldvis 6 июля 2016 00:39 #

      Спасибо за участие в проблеме. Но в штатных шаблонах решения быть не может. Чтобы объяснить приведу пример кривой реализации. По ссылке http://stb-interio.ru/uslugi/ можно видеть, что фотки сжимаются не пропорционально. Если смартфон повернуть по горизонтали, то крайняя правая фотография вылетает за верстку. Почему не пойму.

      • +1
        Евгений Евгений 22 июля 2016 21:35 #
        <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>

Добавить ответ

Чтобы добавить комментарий, зарегистрируйтесь или войдите