Question

在画廊中工作，在方形容器中调整图片大小，尊重宽高比。到现在为止还挺好。但是，我似乎无法在图像周围找到边框：边框显示在方形容器周围？ see codepen

＆＃13;

.gallery {
  overflow: hidden;
  position: relative;
}

.gallery .thumbnail {
  float: left;
  width: 18vw;
  height: 18vw;
}

.thumbnail img {
  border: 6px solid black;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

＆＃13;

<h1>Gallery...</h1>
<div class="gallery">
   <div class="thumbnail">
      <img src="https://cdn.now.howstuffworks.com/media-content/e18fbc93-044b-4c18-ac52-15467d0db19f-640-360.jpg">
   </div>
   <div class="thumbnail">
      <img src="https://cdn.europosters.eu/image/750/posters/looney-tunes-characters-i1344.jpg">
   </div>
</div>

＆＃13;

Answer 1

您可以使用flexbox制作一种方法，这样可以使您的图像保持其宽高比......

dockerserver

.gallery * {
  box-sizing: border-box;
}

.gallery {
  overflow: hidden; /* or comment out this line */
  position: relative;
}

.gallery .thumbnail {
  float: left;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid red;
}

.thumbnail img {
  border: 6px solid black;
  max-width: 100%;
  max-height: 100%;
}

Answer 2

从css中删除高度

＆＃13;

<style media="screen" type="text/css">
    
             .gallery {
               overflow: hidden;
               position: relative;
             }
             .gallery .thumbnail {
                 float: left;
                 width: 18vw;
                 
             }
             .thumbnail img{
                 border: 6px solid black;
                 width: 100%;
                 object-fit: contain;
             }
    
          </style>

＆＃13;

<!DOCTYPE html>
    <html>
       <head>
          
       </head>
       <body>
          <h1>Gallery...</h1>
          <div class="gallery">
             <div class="thumbnail">
                <img src="https://cdn.now.howstuffworks.com/media-content/e18fbc93-044b-4c18-ac52-15467d0db19f-640-360.jpg">
             </div>
             <div class="thumbnail">
                <img src="https://cdn.europosters.eu/image/750/posters/looney-tunes-characters-i1344.jpg">
             </div>
          </div>
       </body>
    </html>

＆＃13;

图像调整正确，但边框包含div？

2 个答案: