Адаптивные картинки

[Sedoirus]

Нужно написать css код, что бы можно было применить к отдельным картинкам:

1. Две, три картинки помещались в один ряд слева направо, если позволяет ширина экрана.
2. Картинки не должны растягиваться больше заданного размера.
3. При сужении экрана до определенного размера, вторая картинка должна перескакивать под первую
4. При дальнейшем уменьшении экрана, картинки также уменьшаются, подстраиваясь под мобильную версию.

 

Пример: http://wiki-turizm.ru/vietnam/966-dostoprimechatelnosti-hanoi

 

Цена?

[sitecreator]

вам же это нужно для opencart?

 

на какой странице? в каком месте?

что окружает эти картинки? текст? другие блоки?

 

очень мало пока конкретики.

 

А сделать то можно.

[Sedoirus]

вам же это нужно для opencart?

 

на какой странице? в каком месте?

что окружает эти картинки? текст? другие блоки?

 

очень мало пока конкретики.

 

А сделать то можно.

 

Для опенкарт 2, есть шаблон shop-store2, а в нем блок НОВОСТИ.

Конкретно на этой странице. Но, чтобы две фото были в ряд - сейчас я две картинки сделал в одну (см в конце статьи). А нужно, чтобы как в задании все было.

Какая еще информация нужна?

https://izvietnama.ru/news/dostoprimechatelnosti-hanoya.html

Змінено 2 квітня 2016 користувачем Sedoirus

[Agatha65]

Исползуя бутсрапа можно разместить картинки так

после ето

<h2>Театр кукол на воде</h2>

добавляем

<div class="row">
  <div class="col-md-6">
    <img src="https://izvietnama.ru/image/catalog/novosti/HanoiWaterPuppetTheater.jpg" class="img-thumbnail">
  </div>
    <div class="col-md-6">
  <img src="https://izvietnama.ru/image/catalog/novosti/tlongwaterpuppet.jpg" class="img-thumbnail">
  </div>
</div>

http://getbootstrap.com/css/#grid

 

[mazein]

1. Две, три картинки помещались в один ряд слева направо, если позволяет ширина экрана.

3. При сужении экрана до определенного размера, вторая картинка должна перескакивать под первую

 

А третья?

[Agatha65]

3 картинки

<div class="row">
  <div class="col-md-4">
    <img src="https://izvietnama.ru/image/catalog/novosti/HanoiWaterPuppetTheater.jpg" class="img-thumbnail">
  </div>
  <div class="col-md-4">
    <img src="https://izvietnama.ru/image/catalog/novosti/tlongwaterpuppet.jpg" class="img-thumbnail">
  </div>
  <div class="col-md-4">
    <img src="https://izvietnama.ru/image/catalog/novosti/tlongwaterpuppet.jpg" class="img-thumbnail">
  </div>
</div>

и так далее

[Sedoirus]

А третья?

 

Вторая под первую, а третья по вторую.

 

 

3 картинки

<div class="row">
  <div class="col-md-4">
    <img src="https://izvietnama.ru/image/catalog/novosti/HanoiWaterPuppetTheater.jpg" class="img-thumbnail">
  </div>
  <div class="col-md-4">
    <img src="https://izvietnama.ru/image/catalog/novosti/tlongwaterpuppet.jpg" class="img-thumbnail">
  </div>
  <div class="col-md-4">
    <img src="https://izvietnama.ru/image/catalog/novosti/tlongwaterpuppet.jpg" class="img-thumbnail">
  </div>
</div>

и так далее

 

Спасибо большое. Мне за эту работу зарядили в личку минимум 50 у.e.

 

Я решил сам разобраться:

в ряд располагаются если находятся в теге <p></p>

максимальный размер width: 100%,

но не больше определенного размера max-width: 400px;

отступы padding: 10px 10px 10px 10px;

 

<p><img style="width: 100%; max-width: 400px; padding: 10px 10px 10px 10px;" src="https://izvietnama.ru/image/catalog/novosti/van-mieu-hanoi.jpg"><img style="width: 100%; max-width: 400px; padding: 10px 10px 10px 10px;" src="https://izvietnama.ru/image/catalog/novosti/xram-literatur.jpg"></p>

 

Сегодня попробую ваш способ.

[mazein]

del

Змінено 3 квітня 2016 користувачем mazein

[Sedoirus]

Исползуя бутсрапа можно разместить картинки так

после ето

<h2>Театр кукол на воде</h2>

добавляем

<div class="row">
  <div class="col-md-6">
    <img src="https://izvietnama.ru/image/catalog/novosti/HanoiWaterPuppetTheater.jpg" class="img-thumbnail">
  </div>
    <div class="col-md-6">
  <img src="https://izvietnama.ru/image/catalog/novosti/tlongwaterpuppet.jpg" class="img-thumbnail">
  </div>
</div>

http://getbootstrap.com/css/#grid

 

columns-2.png

 

Все супер. Спасибо огромное. Ваш способ работает лучше.