Как ограничить изображения контейнером после их масштабирования? - PullRequest
Новая
       8

Как ограничить изображения контейнером после их масштабирования?

1 голос
/ 02 марта 2020

Я создал сетку из 4 столбцов 2 строки. Сетка имеет ширину всей страницы, и каждый раздел разделен равномерно. Я хочу, чтобы изображение в каждом из них было масштабировано до 1,1, и когда пользователь наводит курсор на изображение, масштаб возвращается к 1. Проблема, с которой я сталкиваюсь сейчас, заключается в том, что когда я масштабирую его на 1,1, изображения кажутся перекрывают друг друга, и они больше не содержатся в своем разделе сетки (см. изображение ниже, где я завис над 2-й страницей 2.jpg).

HTML: 

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="container">
            <img id="pic1" src="1.jpg">
            <img id="pic2" src="2.jpg">
            <img id="pic3" src="3.jpg">
            <img id="pic4" src="4.jpg">
            <img id="pic5" src="5.jpg">
            <img id="pic6" src="6.jpg">
            <img id="pic7" src="7.jpg">
            <img id="pic8" src="8.jpg">
        </div>
    </body>
</html>

CSS: 

* {
    padding: 0;
    margin: 0;
}

.container {
    display: grid;
    grid-template-columns: repeat(4, 25%);
    background-color: #000;
    overflow: hidden;
    object-fit: cover;
}

.container img {
    width: 100%;
    height: auto;
    transform: scale(1.1);
}

.container img:hover {
    width: 100%;
    opacity: 1;
    transform: scale(1);
}

Снимок экрана:

Screenshot

Снимок экрана показывает, что происходит при наведении курсора на 2-е изображение 2.jpg. Проблема в том, что прямо сейчас с примененной шкалой изображения 1,2,5,6 все пересекаются по углам. Они не ограничены размером исходной сетки, созданной контейнером.

Ответы [ 2 ]

1 голос
/ 02 марта 2020

Это можно исправить, обернув изображения в контейнеры и установив для свойства overflow этих контейнеров значение hidden (а для width - 100%).

Примерно так: 

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="container">
            <div class="image-container">
                <img id="pic1" src="1.jpg">
            </div>
            <div class="image-container">
                <img id="pic2" src="2.jpg">
            </div>
            <div class="image-container">
                <img id="pic3" src="3.jpg">
            </div>
            <div class="image-container">
                <img id="pic4" src="4.jpg">
            </div>
            <div class="image-container">
                <img id="pic5" src="5.jpg">
            </div>
            <div class="image-container">
                <img id="pic6" src="6.jpg">
            </div>
            <div class="image-container">
                <img id="pic7" src="7.jpg">
            </div>
            <div class="image-container">
                <img id="pic8" src="8.jpg">
            </div>
        </div>
    </body>
</html>

* {
    padding: 0;
    margin: 0;
}

.container {
    display: grid;
    grid-template-columns: repeat(4, 25%);
    background-color: #000;
    overflow: hidden;
    object-fit: cover;
}

.container .image-container {
    width: 100%;
    overflow: hidden;
}

.container .image-container img {
    width: 100%;
    height: auto;
    transform: scale(1.1);
}

.container .image-container img:hover {
    width: 100%;
    opacity: 1;
    transform: scale(1);
}
0 голосов
/ 02 марта 2020

Вот еще один способ сделать это, заключить их в div с overflow:hidden и указать определенный height для этих div.

И вместо масштабирования изображения с помощью преобразования вы можете увеличить его ширину до 110%.

Запустите демонстрацию ниже; 

* {
  padding: 0;
  margin: 0;
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  overflow: hidden;
}

.container div {
  text-align: center;
  height: 100px;
  overflow: hidden;
}

.container img {
  width: 100%;
  transition:0.4s;
}

.container img:hover {
  width: 110%;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="container">
    <div class="">
      <img id="pic1" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
    </div>
    <div class="">
      <img id="pic2" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
    </div>
    <div class="">
      <img id="pic3" src="https://images.unsplash.com/photo-1498837167922-ddd27525d352?ixlib=rb-1.2.1&w=1000&q=80">
    </div>
    <div class="">
      <img id="pic4" src="https://media.gettyimages.com/photos/different-types-of-food-on-rustic-wooden-table-picture-id861188910?s=612x612">
    </div>
  </div>
</body>

</html>
...