CSS - 将边框半径应用于 gif

Question

我正在尝试通过给它border-radius 来设置 gif 的样式。但是 gif 比列本身小，因此边框半径仅适用于 gif 的右侧。谁能帮我把它也应用到左侧？我不想更改background-size: contain!important;，因为那样我会失去 gif 的比例。

PS。 Snippet 打破了行，而 gif 在另一行中，但在此示例中无关紧要。

.half-half-image-text {
  padding: 70px 0px;
}
.half-half-image-text h1 {
  color: #800000;
}
.half-half-image-text .content {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 35px 0px;
}
.half-half-image-text .content p {
  font-size: 22px;
}
.half-half-image-text .img {
  min-height: 320px;
  height: 100%;
  border-radius: 10px;
}

<!-- begin snippet: js hide: false console: true babel: false -->

<div class="half-half-image-text">
   <div class="container" >
      <div class="row">
         <div class="col-7 col-lg-7" style="padding-right:0">
            <div class="content">
               <p>At Fluid Automotive, our purpose is to make automotive parts easily accessible for everyone. Working with our partner brands, we aim to retail the highest quality parts, whilst maintaining a high level of customer satisfaction.</p>
            </div>
         </div>
         <div class="col-5 col-lg-5" style="padding-right:0">
            <a href="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_%28large%29.gif/240px-Rotating_earth_%28large%29.gif" data-gallery="portfolioGallery" class="portfolio-lightbox">
               <div class="img customzoom s2" style="background-size: contain!important;box-shadow: none;
                  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_%28large%29.gif/240px-Rotating_earth_%28large%29.gif')no-repeat center right;background-size:cover;" alt="Plan rozwoju" title="Plan rozwoju"></div>
            </a>
         </div>
      </div>
   </div>
</div>

Answer 1

您可以将此样式添加到portfolio-lightbox：

width: 240px;
display: block;

并将min-height:320px; 更改为min-height:240px 将解决您的问题。如下：

half-half-image-text {
  padding: 70px 0px;
}
.half-half-image-text h1 {
  color: #800000;
}
.half-half-image-text .content {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 35px 0px;
}
.half-half-image-text .content p {
  font-size: 22px;
}
.half-half-image-text .img {
  min-height: 240px;
  height: 100%;
  border-radius: 10px;
}
.portfolio-lightbox {
  width: 240px;
  display: block;
}

<div class="half-half-image-text">
                  <div class="container" >
                    <div class="row">
                      <div class="col-7 col-lg-7" style="padding-right:0">
                        <div class="content">
                          <p>At Fluid Automotive, our purpose is to make automotive parts easily accessible for everyone. Working with our partner brands, we aim to retail the highest quality parts, whilst maintaining a high level of customer satisfaction.</p>
                        </div>
                      </div>
                      <div class="col-5 col-lg-5" style="padding-right:0">
                        <a href="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_%28large%29.gif/240px-Rotating_earth_%28large%29.gif" data-gallery="portfolioGallery" class="portfolio-lightbox">
                        <div class="img customzoom s2" style="background-size: contain!important;box-shadow: none;
                        background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_%28large%29.gif/240px-Rotating_earth_%28large%29.gif')no-repeat center right;background-size:cover;" alt="Plan rozwoju" title="Plan rozwoju"></div>
                      </a>
                      </div>
                    </div>
                  </div>
</div>

Answer 2

只需使用图像标签。

.imgradius {
  border-radius: 10px
}

<img class="imgradius" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_%28large%29.gif/240px-Rotating_earth_%28large%29.gif"></img>