Как масштабировать изображение слайдера - PullRequest
Новая
       52

Как масштабировать изображение слайдера

0 голосов
/ 27 апреля 2020

Я использую шаблон bootstrap. Шаблон, который я использую, имеет слайдер изображений на главной странице. Когда я просматриваю домашнюю страницу в мобильном представлении, изображения ползунка уменьшаются так, чтобы фотография соответствовала мобильному представлению. Мне это не нравится, потому что изображения очень маленькие. Я ищу способ установить фиксированную высоту изображения, чтобы при просмотре на мобильном устройстве изображение становилось больше и занимало большую часть страницы. Это означает, что при просмотре с мобильного устройства изображение будет слегка увеличено. Вот css, который был загружен из шаблона bootstrap. 

@media screen and (max-width: 768px) {
  .feature-left {
    margin-bottom: 20px;
  }
}
.owl-carousel-fullwidth .item > a {
  display: block;
  position: relative;
  z-index: 10;
}
.owl-carousel-fullwidth .item > a {
   display: block;
   position: relative;
   z-index: 10;
}
.owl-carousel-fullwidth .item > a:after {
   z-index: 1;
   content: "";
   position: absolute;
   width: 100%;
   height: 40%;
   bottom: 0;
}

1 Ответ

0 голосов
/ 27 апреля 2020

Я дал вам небольшой пример того, как уменьшить размер изображения , когда экран меньше . Поскольку у меня нет вашего html кода, трудно читать только из вашего css ... Но, возможно, вы можете сделать это самостоятельно с моим примером.

У меня есть установите размер экрана max-width: 500px. Вы можете изменить это, конечно же, а также размер изображения heigth и width. 

<!DOCTYPE html>
<html>
  <head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    /* For width 500px and smaller: */
    @media only screen and (max-width: 500px) {
	   img {
	      height: 40px;
	      width: 100px;
       }
    }
    </style>
  </head>
  <body>
     <img src="https://wptavern.com/wp-content/uploads/2016/07/stack-overflow.png" width="300px" height="150px">
  </body>
</html>
...