CSS 适合图像到容器

Question

I am new to HTML and CSS and I am trying to learn as I develop on a project.我是 HTML 和 CSS 的新手，我正在尝试在开发项目时学习。 I am trying to make an image grid and when the mouse hovers the image an overlay text appears.我正在尝试制作一个图像网格，当鼠标悬停在图像上时，会出现一个覆盖文本。 The problem is that the image inside the container has some lateral gaps that I can't get remove: https://i.stack.imgur.com/weDkb.png问题是容器内的图像有一些我无法删除的横向间隙： https : //i.stack.imgur.com/weDkb.png

The HTML code is as follows: HTML代码如下：

<!-- language: lang-html -->
<body>
    <h1>
        Art Page!
    </h1>
    <div class="row">
      <div class="column">
        <a href="#">
          <div class="container">
            <img src="images/owl.jpg" class="image">
            <div class="overlay">
              <div class="text">Example 1</div>
            </div>
          </div>
        </a>
      </div>
      <div class="column">
        <a href="#">
          <div class="container">
            <img src="images/girl_freedom.jpg" class="image">
            <div class="overlay">
              <div class="text">Example 2</div>
            </div>
          </div>
        </a>
      </div>
      <div class="column">
        <a href="#">
          <div class="container">
            <img src="images/soldiers.jpg" class="image">
            <div class="overlay">
              <div class="text">Example 3</div>
            </div>
          </div>
        </a>
      </div>
      <div class="column">
        <a href="#">
          <div class="container">
            <img src="images/brain.jpg" class="image">
            <div class="overlay">
              <div class="text">Example 4</div>
            </div>
          </div>
        </a>
      </div>
    </div>
</body>

and the css style sheet is:和 css 样式表是：

<!-- language: lang-css -->

body {
    background-color: #fff;
    padding: 0;
    margin: 0;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

.column {
  flex: auto;
}

.column img {
  vertical-align: middle;
}

.container {
  position: relative;
  max-width: 100%;
}

.image {
  display: block;
  height: 100%;
  max-width: 100%;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: 0.5s ease;
  background-color: black;
}

.container:hover .overlay {
  opacity: 0.5;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

Thanks in advance for your help!在此先感谢您的帮助！

Best regards此致

Answer 1

Or you have to equalize the image size with the template using the code below或者您必须使用以下代码将图像大小与模板均衡

change this改变这个

.image {
  display: block;
  height: 100%;
  max-width: 100%;
}

to this:对此：

.image {
  display: block;
  height: 100%;
  width: 100%;
}

demo in jsfiddle jsfiddle 中的演示

Or you have to put the image and the transparent layer inside a div and set Position: Relative .或者您必须将图像和透明层放在 div 中并设置Position: Relative 。

 body { background-color: #fff; padding: 0; margin: 0; } .row { display: flex; flex-wrap: wrap; padding: 0 4px; } .column { flex: auto; text-align: center; } .column img { vertical-align: middle; } .container { position: relative; max-width: 100%; } .image { display: block; height: 100%; width: 100%; } .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: 0.5s ease; background-color: black; } .container:hover .overlay { opacity: 0.5; } .text { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center; } .img-container { display: inline-table; margin: auto; position: relative; }

 <h1> Art Page! </h1> <div class="row"> <div class="column"> <a href="#"> <div class="container"> <div class="img-container"> <img src=" https://www.w3schools.com/bootstrap/ny.jpg" class="image"> <div class="overlay"> <div class="text">Example 1</div> </div> </div> </div> </a> </div> <div class="column"> <a href="#"> <div class="container"> <div class="img-container"> <img src=" https://www.w3schools.com/bootstrap/ny.jpg" class="image"> <div class="overlay"> <div class="text">Example 1</div> </div> </div> </div> </a> </div> <div class="column"> <a href="#"> <div class="container"> <div class="img-container"> <img src=" https://www.w3schools.com/bootstrap/ny.jpg" class="image"> <div class="overlay"> <div class="text">Example 1</div> </div> </div> </div> </a> </div> <div class="column"> <a href="#"> <div class="container"> <div class="img-container"> <img src=" https://www.w3schools.com/bootstrap/ny.jpg" class="image"> <div class="overlay"> <div class="text">Example 1</div> </div> </div> </div> </a> </div> </div>

CSS 适合图像到容器

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-07-16 01:55:09

CSS 适合图像到容器

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-07-16 01:55:09

解决方案1
0 已采纳 2021-07-16 01:55:09