Взбираться на изображение фона поддерживая аспект

Я создаю приспосабливающуюся галерею изображений в том, которого себе показывают миниатюры изображения в квадратах. Для этого я помещаю изображения фона используя background-image и для того, чтобы изображение заняло весь квадрат, использование background-size:cover.

Это функционирует независимо от размера изображения (у различных изображений фона будут различные размеры) и изображения налаживают в размер div контейнер без проблем:

#gallery .squared { 
  height:0; 
  padding-top:50%; 
  background:#ab00ff; 
  position:relative; 
  color:white; 
  font-size:1.2em; 
  background-position:center center; 
  background-size:cover; 
}

@media (min-width: 768px) {
  #gallery .squared { padding-top:25%; }
}

@media (min-width: 992px) {
  #gallery .squared { padding-top:16.66%; }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<section id="gallery" class="section container-fluid">
  <div class="row">
    <div class="squared col-xs-6 col-sm-3 col-md-2" style="background-image:url(http://lorempixel.com/300/200/people);"></div>
    <div class="squared col-xs-6 col-sm-3 col-md-2" style="background-image:url(http://lorempixel.com/300/300/nature);"></div>
    <div class="squared col-xs-6 col-sm-3 col-md-2" style="background-image:url(http://lorempixel.com/300/500/cats);"></div>
    <div class="squared col-xs-6 col-sm-3 col-md-2" style="background-image:url(http://lorempixel.com/500/300/sports);"></div>
    <div class="squared col-xs-6 col-sm-3 col-md-2" style="background-image:url(http://lorempixel.com/300/200/abstract);"></div>
    <div class="squared col-xs-6 col-sm-3 col-md-2" style="background-image:url(http://lorempixel.com/300/400/animals);"></div>
  </div>
</section>

Сейчас я хочу добавить что-то из оживления, и что, когда пользователь двинет мышь над квадратами, изображение фона выросло немного, например 10 %. Но я не нахожу способ это делать. Я пробовал меняя стоимость background-size в 100 % и в :hover в 110 %, но оно не функционирует хорошо, потому что это процентное содержание - относительно контейнера и размера изображения, которым, хотя эффект функционирует, вытянутые в ширину изображения не заканчивают быть видны хорошо (они оказываются повторенными):

#gallery .squared { 
  height:0; 
  padding-top:50%; 
  background:#ab00ff; 
  position:relative; 
  color:white; 
  font-size:1.2em; 
  background-position:center center; 
  background-size:100%; 
  transition:all 1s;
}

#gallery .squared:hover { 
  background-size:110%; 
}

@media (min-width: 768px) {
  #gallery .squared { padding-top:25%; }
}

@media (min-width: 992px) {
  #gallery .squared { padding-top:16.66%; }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<section id="gallery" class="section container-fluid">
  <div class="row">
    <div class="squared col-xs-6 col-sm-3 col-md-2" style="background-image:url(http://lorempixel.com/300/200/people);"></div>
    <div class="squared col-xs-6 col-sm-3 col-md-2" style="background-image:url(http://lorempixel.com/300/300/nature);"></div>
    <div class="squared col-xs-6 col-sm-3 col-md-2" style="background-image:url(http://lorempixel.com/300/500/cats);"></div>
    <div class="squared col-xs-6 col-sm-3 col-md-2" style="background-image:url(http://lorempixel.com/500/300/sports);"></div>
    <div class="squared col-xs-6 col-sm-3 col-md-2" style="background-image:url(http://lorempixel.com/300/200/abstract);"></div>
    <div class="squared col-xs-6 col-sm-3 col-md-2" style="background-image:url(http://lorempixel.com/300/400/animals);"></div>
  </div>
</section>

Чтобы избегать того, чтобы он повторился, он мог бы делать что-то как background-repeat: no-repeat но это не то, что я хочу, потому что было бы видно место в мишени в каких-то приданные квадратную форму.

Так что вопрос был бы: Возможно делать это исключительно с HTML и CSS, не используя языка сценариев JavaScript?

3
задан 13.05.2016, 07:24
3 ответа

Быстрое решение, которое приходит в голову мне, - используя ::before, эти псевдо-элементы могут помогать много в каких-то случаях (как этот). Это немного 'hackish', но может давать тебе идею.

Ты мог бы использовать ::before с видимостью в hidden или в видимом, в вышеупомянутом случае ты не нуждался бы в изображении фона, который ты объявляешь в стиле inline каждого div галереи.

Невыгода - что ::before ты не можешь использовать это в стиле inline, ты был бы должен добавлять один <style>...</style> для каждого div в случае, что ты произвел их с loop или сходно.

#gallery .squared { 
  height:0; 
  padding-top:50%; 
  background:#ab00ff; 
  position:relative; 
  color:white; 
  font-size:1.2em; 
  background-position:center center; 
  background-size:cover; 
  transition:all 1s;
  overflow:hidden;
}

#gallery .squared::before {
  background-image:url(http://lorempixel.com/300/200/people);
  content: " ";
  height:100%;
  width:100%;
  position:absolute;
  top:0;
  left:0;
  background-size:cover;
  visibility:hidden; /* puede ser visible también */
}

#gallery .squared:hover::before {
  background-image:url(http://lorempixel.com/300/200/people);
  height:110%;
  width:110%;
  content: " ";  
  position:absolute;
  top:-5%;
  left:-5%;
  transition:all 1s;
  visibility:visible;
}

#gallery .squared:hover { 
  background-size:110%; 
}

@media (min-width: 768px) {
  #gallery .squared { padding-top:25%; }
}

@media (min-width: 992px) {
  #gallery .squared { padding-top:16.66%; }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<section id="gallery" class="section container-fluid">
  <div class="row">
    <div class="squared col-xs-6 col-sm-3 col-md-2" style="background-image:url(http://lorempixel.com/300/200/people);"></div>
    <div class="squared col-xs-6 col-sm-3 col-md-2" style="background-image:url(http://lorempixel.com/300/300/nature);"></div>
    <div class="squared col-xs-6 col-sm-3 col-md-2" style="background-image:url(http://lorempixel.com/300/500/cats);"></div>
    <div class="squared col-xs-6 col-sm-3 col-md-2" style="background-image:url(http://lorempixel.com/500/300/sports);"></div>
    <div class="squared col-xs-6 col-sm-3 col-md-2" style="background-image:url(http://lorempixel.com/300/200/abstract);"></div>
    <div class="squared col-xs-6 col-sm-3 col-md-2" style="background-image:url(http://lorempixel.com/300/400/animals);"></div>
  </div>
</section>
3
ответ дан 24.11.2019, 14:24
  • 1
    Спасибо за ответ. Я sirvi и # 243; помощи и основания, для которого acab и # 233; делая в конце концов. – Alvaro Montoro♦ 17.05.2016, 23:12

У меня есть альтернатива и я объясняю мои причины.

Часть, которая мне не нравится использования :before для этого задания дело в том, что - очень сложный estilar элементы, когда url изображений еще известен.

Ты не был бы должен менять стиль background-size: cover так как этот будет давать тебе лучшую возможную настройку изображений, так что так показывать изображение как чтобы оживлять ее должно оставлять это свойство как дела.

Это в твой вкус, но я предпочитаю использовать transform с transform: scale(X) вместо того, чтобы меняться width: 110%, height: 110% или background-size: 110%, он менее совместим, но разум состоит в том, что, когда ты используешь размеры, более сложно контролировать источник оживления. Оживляя с transform: scale всегда он это будет делать с центра, и если ты захочешь изменить это, ты можешь использовать transform-origin. Если ты используешь размеры, ты будешь должен точно подходить постоянно left, top, и т.д. в зависимости от стиля, который ты выбрал.

Чтобы добиваться того, что ты хочешь просто, создай новый элемент внутри каждого из твоих divs с классом .squared. Я использовал класс .thumb. Использовать position: absolute он обязательный, так как элемент .squared будь разрушен с height: 0 но так как контейнер имеет position: relative нет риска, который вытекал бы из Вашего места. У этого есть точно тот же эффект, который нужно использовать :before но без проблем, которые этот перевозит, и у тебя есть больше свободы, чтобы использовать стили inline.

Проверь demo, который оставил тебя.

#gallery .squared {
  height: 0;
  padding-top: 50%;
  position: relative;
  overflow: hidden;
}
#gallery .squared .thumb {
  position: absolute;
  background-size: cover;
  transition: all 1s;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}
#gallery .squared .thumb:hover {
  transform: scale(1.5);
}
#gallery .squared:hover {
  background-size: 110%;
}
@media (min-width: 768px) {
  #gallery .squared {
    padding-top: 25%;
  }
}
@media (min-width: 992px) {
  #gallery .squared {
    padding-top: 16.66%;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<section id="gallery" class="section container-fluid">
  <div class="row">
    <div class="squared col-xs-6 col-sm-3 col-md-2">
      <div class="thumb" style="background-image:url(http://lorempixel.com/300/200/people);"></div>
    </div>
    <div class="squared col-xs-6 col-sm-3 col-md-2">
      <div class="thumb" style="background-image: url(http://lorempixel.com/300/300/nature);"></div>
    </div>
    <div class="squared col-xs-6 col-sm-3 col-md-2">
      <div class="thumb" style="background-image: url(http://lorempixel.com/300/500/cats);"></div>
    </div>
    <div class="squared col-xs-6 col-sm-3 col-md-2">
      <div class="thumb" style="background-image: url(http://lorempixel.com/500/300/sports);"></div>
    </div>
    <div class="squared col-xs-6 col-sm-3 col-md-2">
      <div class="thumb" style="background-image: url(http://lorempixel.com/300/200/abstract);"></div>
    </div>
    <div class="squared col-xs-6 col-sm-3 col-md-2">
      <div class="thumb" style="background-image: url(http://lorempixel.com/300/400/animals);"></div>
    </div>
  </div>
</section>

Сейчас ты можешь повторно использовать этот snipet css, не будучи должен изменять линию кода, только должен менять urls твоих изображений, что ты можешь добиваться легко с repeater в языке, чтобы ты использовал.

2
ответ дан 24.11.2019, 14:24
  • 1
    Этот soluci и # 243; n видят хорошо. Это и #250; nico, который менять ему, и # 237; в: не надо помещать изображение фона div с классом " squared" потому что тот, у которого есть класс " thumb" он это прячет. – Alvaro Montoro♦ 18.05.2016, 18:47
  • 2
    @AlvaroMontoro Верный, класс .squared только act и # 250; в как рама для фотографий. Плохая м и # 237; чтобы в копировать html для ответа. Us и # 233; твой начальный пример, чтобы добавлять стили и olvid и # 233; удалять эту часть. Немедленно я это обновляю. – devconcept 18.05.2016, 18:59

Благодаря ответу Shaz, я смог находить способ это делать используя псевдо-элемент ::before (он ослепил меня пробуя делать это прямо, не думая о других альтернативах). То, что я сделал, пошло:

  • Использовать такой первоначальный контейнер как рама с одним overflow:hidden чтобы избегать того, чтобы были видны контенты, которые превосходят Ваш размер.
  • Добавлять псевдо-элемент :before который заняли 100 % размера контейнера, и что считал изображением фона изображение, которое я хочу с background-size:cover.
  • Когда мышь происходит над контейнером, делать большим псевдо-элемент (меняя положение также) и стиль background-size:cover он возьмется за оставшуюся часть.

Конечный результат остался таким:

#gallery .squared { 
  height:0; 
  padding-top:50%; 
  position:relative; 
  overflow:hidden;
}

#gallery .squared::before {
  content: " ";
  position:absolute;
  background-size:cover;
  transition:all 0.25s linear;
  height:100%;
  width:100%;
  top:0;
  left:0;
}

#gallery .squared:hover:before {
  content: " ";  
  height:110%;
  width:110%;
  top:-5%;
  left:-5%;
}

.img0::before { background-image:url(http://lorempixel.com/300/200/people); }
.img1::before { background-image:url(http://lorempixel.com/300/300/nature); }
.img2::before { background-image:url(http://lorempixel.com/300/500/cats); }
.img3::before { background-image:url(http://lorempixel.com/500/300/sports); }
.img4::before { background-image:url(http://lorempixel.com/300/200/abstract); }
.img5::before { background-image:url(http://lorempixel.com/300/400/animals); }

#gallery .squared:hover { 
  background-size:110%; 
}

@media (min-width: 768px) {
  #gallery .squared { padding-top:25%; }
}

@media (min-width: 992px) {
  #gallery .squared { padding-top:16.66%; }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<section id="gallery" class="section container-fluid">
  <div class="row">
    <div class="squared col-xs-6 col-sm-3 col-md-2 img0"></div>
    <div class="squared col-xs-6 col-sm-3 col-md-2 img1"></div>
    <div class="squared col-xs-6 col-sm-3 col-md-2 img2"></div>
    <div class="squared col-xs-6 col-sm-3 col-md-2 img3"></div>
    <div class="squared col-xs-6 col-sm-3 col-md-2 img4"></div>
    <div class="squared col-xs-6 col-sm-3 col-md-2 img5"></div>
  </div>
</section>
0
ответ дан 24.11.2019, 14:24