Как сделать мой контент реагирующим на размер экрана по горизонтали и вертикали? - PullRequest
Новая
       2

Как сделать мой контент реагирующим на размер экрана по горизонтали и вертикали?

0 голосов
/ 06 июня 2019

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

В настоящее время мой код позволяет уменьшить ширину, но не высоту. Это возможно сделать?

Мой текущий код: https://jsfiddle.net/u1Ld5r7v/1/

html,
body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: auto;
}

body {
  height: 100%;
  overflow: hidden;
}

main {
  display: flex;
}

img {
  width: 22.5vw;
  height: 35vw;
  margin: 0;
  object-fit: cover;
}

.wrapper {
  display: flex;
}

.list {
  height: 100vh;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  align-items: center;
  padding: 0;
}

.list a {
  margin: 0%;
  padding: 0 4%;
}
<body>
  <main class="wrapper">
    <div class="list">
      <a href="#"><img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2014/01/af2.png"></a>
      <a href="#"><img src="https://www.wampstore.com/store/image/cache/data/Wamp/Products/Vallejo/Flat%20Blue-900x900.jpg"></a>
      <a href="#"><img src="https://www.craftmasterpaints.co.uk/images/colours/decorative-flat-colour/Orange.jpg"></a>
      <a href="#"><img src="https://www.craftmasterpaints.co.uk/images/colours/decorative-flat-colour/Pink.jpg"></a>
      <a href="#"><img src="https://i.pinimg.com/originals/bf/48/a7/bf48a70ec34fbcb3d71f3c685e98f95b.jpg"></a>
      <a href="#"><img src="https://emmanuel.info/wp-content/uploads/2018/12/rawpixel-577494-unsplash.jpg"></a>
    </div>
  </main>

</body>

Спасибо за вашу помощь.

Ответы [ 2 ]

1 голос
/ 06 июня 2019

Изображения масштабируются только при горизонтальном изменении размера, потому что они имеют размер единиц измерения ширины области просмотра (vw). 

img {
  width: 22.5vw;
  height: 35vw;
}

Если вы хотите, чтобы их размеры были измененыизмените размер по вертикали, тогда вы будете использовать единицы высоты окна просмотра (vh).

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

исправленная демоверсия

https://drafts.csswg.org/css-values/#viewport-relative-lengths

0 голосов
/ 07 июня 2019

Проблема решена, здесь мы используем различные свойства для управления высотой и шириной.

Демо здесь .

HTML 

  <body>
    <main class="wrapper">
      <div class="list">
        <a href="#"><img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2014/01/af2.png"></a>
        <a href="#"><img src="https://www.wampstore.com/store/image/cache/data/Wamp/Products/Vallejo/Flat%20Blue-900x900.jpg"></a>
        <a href="#"><img src="https://www.craftmasterpaints.co.uk/images/colours/decorative-flat-colour/Orange.jpg"></a>
        <a href="#"><img src="https://www.craftmasterpaints.co.uk/images/colours/decorative-flat-colour/Pink.jpg"></a>
        <a href="#"><img src="https://i.pinimg.com/originals/bf/48/a7/bf48a70ec34fbcb3d71f3c685e98f95b.jpg"></a>
        <a href="#"><img src="https://emmanuel.info/wp-content/uploads/2018/12/rawpixel-577494-unsplash.jpg"></a>
      </div>
    </main>
  </body>

CSS 

html,body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width:auto;
}

body {
  height: 100%;
  overflow: hidden;
}

main {
  display: flex;
}

img {
  width: 45vmin;     /*here we use vmin rather than vh or vw*/
  height: 70vmin;    /*here we use vmin rather than vh or vw*/
  margin: 0;
  object-fit: cover;
}
.wrapper {
  display: flex;
}

.list {
  width: 100vw;
  height: 100vh;    /*here we add height proprietie !important!*/ 
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 0;
  align-items: center;
}

.list a {
  margin: 0%;
  padding: 0 4%;
}

Спасибо за вашу помощь :-)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...