CSS Flexbox масштабирование изображения внутри ребенка - PullRequest
Новая
       40

CSS Flexbox масштабирование изображения внутри ребенка

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

У меня есть следующий HTML-код: 

<html>
  <head>
    <title>asd</title>
  </head>
  <body>
    <div class="wrapper">
      <div class="slide slide1"></div>
      <div class="slide slide2"></div>
      <div class="slide slide3"></div>
      <div class="slide slide4"></div>
    </div>
  </body>
</html>

и следующий CSS: 

* { box-sizing: border-box; }

.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.slide {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  webkit-transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide1 {
  background-image: url('http://hdwpro.com/wp-content/uploads/2016/03/Fantastic-Full-HD-Wallpaper.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.slide2 {
  background-image: url('http://hdwpro.com/wp-content/uploads/2016/03/Galaxy-Space-Full-HD-Wallpaper.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.slide3 {
  background-image: url('http://hdwpro.com/wp-content/uploads/2016/03/Landscape-Full-HD-Wallpaper.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.slide4 {
  background-image: url('http://hdwpro.com/wp-content/uploads/2018/10/Free-Desktop-Background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.slide:hover {
  transform: scale(1.2);
  z-index:20;
}

Увеличение внутри div flexПохоже, незначительный сбой при преобразовании scale, и я также хочу найти способ просто увеличить фоновое изображение внутри div, а не div (который будет масштабироваться за пределами порта просмотра).

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

Как вы можете видеть в этом Codepen: https://codepen.io/pufosme/pen/MZWWpM

СпасибоВы!

Ответы [ 2 ]

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

Лично я бы использовал IMG внутри каждого слайда (используя подгонку объекта и положение объекта для замены свойств фона).Затем масштабируйте изображение, а не слайд, и на каждом слайде вы устанавливаете overflow: hidden.

Вот так https://codepen.io/anon/pen/bOGNoN

.slide {
  ...
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.slide img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  height: 100%;
  transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  webkit-transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide:hover img {
  transform: scale(1.2);
  z-index:20;
  -webkit-box-shadow: 0px 0px 10px 0px rg-webkit-box-shadow: 0px 0px 18px 1px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 18px 1px rgba(0,0,0,0.5);
box-shadow: 0px 0px 18px 1px rgba(0,0,0,0.5);
}

и HTML 

<div class="slide slide1">
  <img src='http://hdwpro.com/wp-content/uploads/2016/03/Fantastic-Full-HD-Wallpaper.jpg' />
</div>
0 голосов
/ 09 декабря 2018

требуется войти в родительский div и добавить overflow:hidden (извините за мой плохой английский.)

ссылка на кодовую ссылку https://codepen.io/dgknca/pen/ebYmRW

* { box-sizing: border-box; }

.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.parent {
  flex:1; 
  height: 100vh;
  overflow:hidden;
}

.slide {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  webkit-transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slide1 {
  background-image: url('http://hdwpro.com/wp-content/uploads/2016/03/Fantastic-Full-HD-Wallpaper.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.slide2 {
  background-image: url('http://hdwpro.com/wp-content/uploads/2016/03/Galaxy-Space-Full-HD-Wallpaper.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.slide3 {
  background-image: url('http://hdwpro.com/wp-content/uploads/2016/03/Landscape-Full-HD-Wallpaper.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.slide4 {
  background-image: url('http://hdwpro.com/wp-content/uploads/2018/10/Free-Desktop-Background.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.slide:hover {
  transform:scale(1.2);
}
<html>
  <head>
    <title>asd</title>
  </head>
  <body>
    <div class="wrapper">
      <div class="parent">
      <div class="slide slide1"></div>
        </div>
      <div class="parent">
      <div class="slide slide2"></div>
      </div>
      <div class="parent">
      <div class="slide slide3"></div>
    </div>
      <div class="parent">
      <div class="slide slide4"></div>
  </div>
    </div>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...