0

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

PS。片段打破了行，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>

4

2 回答 2

2

您可以将此样式添加到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>

于 2021-11-02T19:53:14.297 回答
1

只需使用图像标签。

.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>

于 2021-11-02T19:53:20.613 回答