Отзывчивый img внутри div внутри элемента li? - PullRequest
Новая
       8

Отзывчивый img внутри div внутри элемента li?

0 голосов
/ 22 декабря 2018

У меня есть "img" внутри "div" внутри элемента "li", и все находится в "разделе", который представляет и автоматический / ручной слайдер изображений.Я пытаюсь получить отзывчивые изображения.В моем случае, когда я переключаюсь на обзор телефона и изменяю размер моей страницы, мое изображение не отображается, оно остается в том же размере.

PS: я не могу изменить код моего слайдера.это должно быть сделано так, как написано в html-коде.

вот мой html-код: 

<section id="home"  onmouseover="Stop()" onmouseout="init()">
    <ul class="slides stretch">
        <input type="radio" name="radio-btn" id="img-1" checked />
        <li class="slide-container">
            <div class="slide">
                <img src="http://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg" />
            </div>
            <div class="nav">
                <label class="prev" onclick="PrevSlide(1)">&#x2039;</label>
                <label id="clicker-1" class="next" onclick="NextSlide(1)">&#x203a;</label>
            </div>
        </li>

        <input type="radio" name="radio-btn" id="img-2" />
        <li class="slide-container">
            <div class="slide">
              <img src="http://farm9.staticflickr.com/8504/8365873811_d32571df3d_z.jpg" />
            </div>
            <div class="nav">
                <label class="prev" onclick="PrevSlide(2)">&#x2039;</label>
                <label id="clicker-2" class="next" onclick="NextSlide(2)">&#x203a;</label>
            </div>
        </li>
    </ul>
</section>

, а для css вот мой код: 

/*<ul> elements*/
.slides {
    padding: 0;
    height: 420px;
    display: block;
    margin: 0 auto;
    position: relative;
}

.slides * {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.slides input { display: none; }

/*<li> element: Contains Image + Arrows*/
.slide-container { display: block; }

/*<div> element: Contains only Image*/
.slide {
    top: 0;
    opacity: 0;
    width: 1264px;
    height: 420px;
    display: block;
    position: absolute;
    transform: scale(0);
    transition: all .7s ease-in-out;
}

.slide  img {
width:100%;
    height: 100%;
}

.nav label {
    height: 100%;
    display: none;
    position: absolute;

opacity: 0;
    z-index: 1;
    cursor: pointer;

    transition: opacity .2s;

    color: #FFF;
    font-size: 156pt;
    text-align: center;
    line-height: 380px;
    font-family: "Varela Round", sans-serif;
    background-color: rgba(255, 255, 255, .3);
    text-shadow: 0px 0px 15px rgb(119, 119, 119);
}

.slide:hover + .nav label { opacity: 0.9; }

.nav label:hover { opacity: 1; }

.nav .next { right: 0; }


input:checked + .slide-container  .slide {
    opacity: 1;

    transform: scale(1);

    transition: opacity 1s ease-in-out;
}

input:checked + .slide-container .nav label { display: block; }

i 'Вы уже пробовали код CSS, но не работали вообще: 

.slide img{
    max-width:100%;
    height:auto;
}

Может кто-нибудь предложить мне другое решение для этого, пожалуйста?

Ответы [ 4 ]

0 голосов
/ 22 декабря 2018

Крис Хэппи прав.Но я бы хотел остановиться подробнее.Я хотел бы добавить это в ваш HTML.Поместите тег img в другой элемент div, как показано ниже: 

<li class="slide-container">
    <div class="slide">
        <div class="slide-container-container">
            <img src="http://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg" />
        </div>
    </div>
    <div class="nav">
        <label class="prev" onclick="PrevSlide(1)">&#x2039;</label>
        <label id="clicker-1" class="next" onclick="NextSlide(1)">&#x203a;</label>
    </div>
</li>

Затем некоторые настройки с некоторыми стилями, как показано ниже: 

.slide {
    top: 0;
    opacity: 0;
    width: 1264px;
    height: 420px;
    display: block;
    position: relative;
    transform: scale(0);
    transition: all .7s ease-in-out;
    margin: 0 auto;    //added-line
}
.slide:before {
    content: "";
    display: block;
    padding-top: 63%;
}
.slide-container-container {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
}
.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.nav label {
    height: 100%;
    display: none;
    position: absolute;
    opacity: 0;
    z-index: 1;
    cursor: pointer;
    transition: opacity .2s;
    color: #FFF;
    font-size: 156pt;
    text-align: center;
    line-height: 50vh;  //added-line
    height: 50vh;    //added-line
    top: 0;    //added-line
    font-family: "Varela Round", sans-serif;
    background-color: rgba(255, 255, 255, .3);
    text-shadow: 0px 0px 15px rgb(119, 119, 119);
}

Теперь, предположив, что ваш вид имеет ширину 1264 иВысота 420Это нормально.Но если вы хотите сделать его отзывчивым, вам нужно сломать это свойство и изменить его на vh, vw или%.Таким образом, предполагая, что область просмотра имеет ширину 425 пикселей.Это прекрасно, потому что теперь вы можете изменить width: 1264px на width: 100% и height: 100vh.Затем вам также следует изменить метки навигации line-height: 50vh и height: 50vh, в зависимости от того, что вы предпочитаете.

Кроме того, техника адаптивного изображения опирается на соотношение сторон.Вот почему я поставил .slide-container-container для изображения и .slide:before.Надеюсь, это поможет.

0 голосов
/ 22 декабря 2018

Я полагаю, что вы ищете медиа-запрос, реагирующий на CSS. Что-то, что будет корректировать CSS страниц (в данном случае размер изображения) в зависимости от размера экрана браузера пользователя?

Я считаю, что это должно работать.Примечание: max-width: 600px - это максимальная ширина браузера, которая активирует этот CSS. 

   @media only screen and (max-width: 600px) {
  .slide {
   CSS HERE
  }
}

Дополнительная информация для вас: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

0 голосов
/ 22 декабря 2018

Как объяснил Крис Хэппи, вы установили фиксированную ширину и высоту для вашего контейнера .slide, что будет препятствовать адаптации изображения к размеру области просмотра.

Чтобы решить эту проблему, вам нужно будет использовать адаптивный макет в сочетании с блоками, отвечающими на размер области просмотра (например,%, vw, vh) .

В качестве дополнительной рекомендации рассмотрите возможность использования flexbox. Вот полное руководство по flexbox

0 голосов
/ 22 декабря 2018

Ваша проблема в следующем коде.

.slide {
    /* ... */
    width: 1264px;
    height: 420px;
}

В адаптивном коде вы не можете иметь фиксированную ширину, подобную этой.

Почему это не работает? max-width: 100% изображения гарантирует, чтоникогда не будет шире родительского элемента изображения - в вашем случае .slide - 1264px.

Как это исправить? Без кода Javascript, который это выполняет, яможет только предлагать решения.

  1. Измените width: 1264px; на width: 100%.
  2. Установите соотношение сторон слайд-шоу с отступами и сделайте изображение заполнением родительского элемента. 

/*<div> element: Contains only Image*/
.slide {
    top: 0;
    opacity: 0;
    width: 100%; /* Code changed */
    height: 0;  /* Code changed */
    padding-bottom: 33.2%; /* Code added */
    display: block;
    position: absolute;
    transform: scale(0);
    transition: all .7s ease-in-out;
}

.slide  img {
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height: 100%;
}

Однако у меня есть ощущение, что слайд-шоу не будет работать, если слайд не будет 1264px.

Для получения дополнительной помощи мне понадобится код Javascript, который его запускает, и желательно рабочая демонстрация вашего кода.Это можно сделать, добавив ссылку на свой веб-сайт или заново создав код с помощью фрагмента JSfiddle, CodePen или StackOverflow.

...