Jump to content
  • 0

Масштабирование изображений в галерее


Радосвет
 Share

Question

Добрый день!

 

Уважаемые специалисты, помогите, пожалуйста, с масштабированием картинок, у меня никак не получается сделать ровно для всех браузеров.

 

Имеется вордпресс, в теме есть галерея с горизонтальной "прокруткой".

 

У меня было желание настроить галерею более грамотно и удобно.

Изначально галерея предполагает загрузку картинок одной высоты, но мне это не подходит.

У меня вертикальные и горизонтальные фотографии, и мне нужно, чтобы они были одной высоты в галерее, при этом, чтобы вертикальные масштабировались под высоту горизонтальных.

 

В оригинале выглядит вот так:

 

http://demo.megathe.me/heat/portfolio/people/

 

Код стиля:

/* =iosSlider----------------------------------------------- */.container {	position: relative;	width: 100%;	height: auto;	margin: 0 auto;	overflow: visible;}.container .iosSliderContainer {	position: relative;	top: 0;	left: 0;	width: 100%;	height: auto;	margin: 0 0 0 0;	overflow: visible;}.iosSlider {	position: relative;	top: 0;	left: 0;	overflow: visible;	width: 100%;	height: auto;}.iosSlider .slider {	width: 50000px;	height: 100%;}.iosSlider .slider .item {	float: left;	width: auto;}.iosSlider .slider .item img {	width: 100%;	height: auto;	float: left;}

На моём сайте вот так:

 

http://www.radosvet.ru/portfolio/margarita-portret/

 

Код я немного изменил, добавив max-height: 600px:

/* =iosSlider max-height: 600px;----------------------------------------------- */.container {	position: relative;	width: 100%;	height: auto;	margin: 0 auto;	overflow: visible;	max-height: 600px;}.container .iosSliderContainer {	position: relative;	top: 0;	left: 0;	width: 100%;	height: auto;	margin: 0 0 0 0;	overflow: visible;	max-height: 600px;}.iosSlider {	position: relative;	top: 0;	left: 0;	overflow: visible;	width: 100%;	height: auto;	max-height: 600px;}.iosSlider .slider {	width: 50000px;	height: 100%;}.iosSlider .slider .item {	float: left;	width: auto;max-height: 600px;}.iosSlider .slider .item img {	width: auto;	height: auto;	float: left;	max-height: 600px;	max-width: 100%;}

В итоге вроде получилось то что мне нужно, но проблема в том, что при уменьшении окна вертикльные кадры "обрезаются" снизу.

 

Я ещё дописал, добавив     min-height: 600px;:

----------------------------------------------- */.container {	position: relative;	width: 100%;	height: auto;	margin: 0 auto;	overflow: visible;	max-height: 600px;	min-height: 600px;}.container .iosSliderContainer {	position: relative;	top: 0;	left: 0;	width: 100%;	height: auto;	margin: 0 0 0 0;	overflow: visible;	max-height: 600px;	min-height: 600px;}.iosSlider {	position: relative;	top: 0;	left: 0;	overflow: visible;	width: 100%;	height: auto;	max-height: 600px;	min-height: 600px;}.iosSlider .slider {	width: 50000px;	height: 100%;}.iosSlider .slider .item {	float: left;	width: auto;max-height: 600px;}.iosSlider .slider .item img {	width: auto;	height: auto;	float: left;	max-height: 600px;	max-width: 100%;}

Теперь почти всё так, как мне нравится. Но параметр максимальной высоты не позволяет адаптивному дизайну быть на 100% рабочим.

Например, при сужении окна по высоте картинка на экран не помещается.

А в мобильных браузерах вообще всё как-то странно смотрится :( В Firefox android при пролистывании далее картинки уменьшились, в Хроме просто лента из картинок вниз (хотя этотвариант меня устраивает).

 

Я бы хотел, чтобы всё это было красиво на всех устройствах, но не знаю как настроить контейнер и картинки.

Помогите, пожалуйста, что можно добавить или изменить?

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

С максимальной и минимальной высотой всё таки перемудрили..

Согласен 100%!

Но как это сделасть средствами CSS вообще не понимаю, всё перепробовал, то вертикальные картинки вылезают за пределы вниз (когда ширина 100%), то в браузере сафари все картинки "сплющиваются", то в бобильных устройствах бардак :( В принципе, и сейчас в Firefox for android галерея глючит, с чёрным фоном вместо картинок, и тд.

Возможно, как вариант, скрипт, который определял бы вертикальность картинок и масштабировал их по высоте, но боюсь, что это может не сработать в мобильных устройствах. :( И вообще такой способ считаю грубым, хотя и подозреваю, что галерея всё равно на скрипте работает, надо посмотреть..

Link to comment
Share on other sites

  • 0

Галереи и работают на скриптах.. 

 

 

 

чтобы вертикальные масштабировались под высоту горизонтальных.

 

А если высоты картинок везде разные, как тогда?)))

 

Вариант, который вы хотите, что бы и высота была задана и картинки подстраивались - они будут деформироваться.. 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Kristi
      Подскажите можно увеличить расстояние между текстом и картинкой в маркированном списке. Конкретно для маркированного списка? 

    • By Balalayka
      Не могу расположить второй ряд картинок все div идут в одну строчку. Пробовал и команду clear (both, left) всем блокам прописан float:left.(Всё в конце кода). Заранее спасибо за помощь.На всякий случай прикреплю ещё картинки.
      index.html
      style.css









    • By Lex_85
      Здравствуйте! Есть небольшая проблема: имеется блок, в который вставляем строчные гиперссылки с изображениями внутри. Обнаружил, что в данном блоке появляется странный отступ снизу (зеленного цвета), от которого я не могу избавиться. Так как я новичок, то прошу помощи. Визуально проблему можно посмотреть здесь: https://jsfiddle.net. Проблема плевая, но я застрял . Заранее благодарю!
    • By gadjet
      Такая конструкция работает нормально
      <img src="/img/logo.png" alt="Logo" />
       
      Перестает работать внутри контейнера <a>. И локально и на хостинге, картинка не отображается
      <a href="/index.html>
      <img src="/img/logo.png" alt="Logo" />
      </a>
  • Обсуждения

    • <div class="modal-body"> <?php if (!empty($_SESSION['cart'])): ?> <?php else: ?> <p>Корзина пуста...</p> <?php endif; ?> <?php if (!empty($_SESSION['cart'])): ?> <table class="table"> <thead> <tr> <th scope="col">Изображение</th> <th scope="col">Название</th> <th scope="col">Цена</th> <th scope="col">Количество</th> </tr> </thead> <tbody> <?php foreach ($_SESSION['cart'] as $id => $item): ?> <tr> <td><a href="#"><img class="br-3" src="images/<?= $item['img'] ?>" alt="<?= $item['title'] ?>"></a></td> <td><p><?= $item['title'] ?></p></td> <td><?= $item['price'] ?></td> <td> <?= $id ?> <a id="min-to-cart" href="?cart=minus&id=<?= $id ?>" class="min-to-cart minus-btn badge-light minus-to-cart" data-id="<?php echo $id ?>"></a> <?= $item['qty'] ?> <a id="plus-to-cart" href="?cart=plus&id=<?= $id ?>" class="plus-btn badge-light plus-to-cart" data-id="<?php echo $id ?>"></a> <a href="#" class="delete-btn remove-from-cart badge-light" data-id="<?php echo $id ?>"></a> <button type="button" class="btn delete-btn remove-from-cart" id="remove-from-cart" data-id="<?php echo $id ?>"></button> </td> </tr> <?php endforeach; ?> <tr> <td colspan="4" align="right">Товаров: <span id="modal-cart-qty"><?= $_SESSION['cart.qty'] ?></span> <br> На сумму: <?= $_SESSION['cart.sum'] ?> руб.</td> </tr> </tbody> </table> <form action="telegram.php" method="POST"> <legend>Введите имя, номер телефона и адрес:</legend> <div class="form-group"> <input type="text" class="form-control" id="" name="name" placeholder="Введите имя"> </div> <div class="form-group"> <input type="text" class="form-control" id="" name="phone" placeholder="Введите телефон"> </div> <div class="form-group"> <input type="text" class="form-control" id="" name="address" placeholder="Введите адрес"> </div> <div class="form-group"> <textarea name="msg" placeholder="Ваш комментарий..."></textarea> </div> <button type="submit" class="btn btn-success">Оформить заказ</button> <button type="button" class="btn btn-danger" id="clear-cart">Очистить корзину</button> </form> <!--<script src="common/scripts.js"></script>--> <?php endif; ?> </div> <div class="modal-footer"> <?php foreach ($_SESSION['cart'] as $id => $item): ?> <a href="#" class="delete-btn remove-from-cart badge-light" data-id="<?php echo $id ?>"></a> <?php endforeach; ?> </div>               функция полной очистки работает, видимо потому что этот класс есть изначально, а не появляется из-за сессии   $('.add-to-cart').on('click', function (e){ e.preventDefault(); let id = $(this).data('id'); $.ajax({ url: 'cart.php', type: 'GET', data: {cart: 'add', id: id}, dataType: 'json', success: function (res) { if (res.code == 'ok') { showCart(res.answer); } else { alert(res.answer); } }, error: function () { alert('Error'); } }); }); $('#cart-modal .modal-cart-content .remove-from-cart').on('click', function (e){ e.preventDefault(); let id = $(this).data('id'); console.log(id); }); $('#get-cart').on('click', function (e){ e.preventDefault(); $.ajax({ url: 'cart.php', type: 'GET', data: {cart: 'show'}, success: function (res) { showCart(res); }, error: function () { alert('Error'); } }); }); $('#cart-modal .modal-cart-content').on('click', '#clear-cart', function (){ $.ajax({ url: 'cart.php', type: 'GET', data: {cart: 'clear'}, success: function (res) { showCart(res); }, error: function () { alert('Error'); } }); });
    • Например, добавить  .wrapper li {     clear: both; } http://jsfiddle.net/e3f9ozLr/
    • Добрый день.На сайте после удаления переводчика gtranslate появилась такая вот проблема:при переадресации с http://tto-studio.com.ua/ на https://tto-studio.com.ua/ru/ вылетает такая вот страница <strong>https://tto-studio.com.ua/wp-content/plugins/gtranslate/url_addon/gtranslate.php?glang=ru&gurl=</strong>Что мне делать, как это можно исправить? А точнее — на странице https://tto-studio.com.ua/ru/ в адресной строке я удаляю букву s с http s:// и нажимаю enter. И заместь того чтобы меня кинуло на страницу — https://tto-studio.com.ua/ru/ меня кидает на — https://tto-studio.com.ua/wp-content/plugins/gtranslate/url_addon/gtranslate.php?glang=ru&gurl=
    • Ты в стрелочной функции из-за того что у тебя одно выражение опустил { }. А это ведет к неявному возврату результата выражения.
    • Здравстуйте, каким образом можно получить доступ к Mathcad Application Server для получения доступа к документам и функциям Mathcad через Интернет. Может быть, есть другой способ связать интернет с Mathcad ?
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy