CSS - 将边框半径应用于 gif

Posted 2023-03-28

【中文标题】CSS - 将边框半径应用于 gif

【英文标题】：CSS - aplying border-radius to a gif

【发布时间】：2021-12-17 07:36:04

【问题描述】：

我正在尝试通过给它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;"  title="Plan rozwoju"></div>
            </a>
         </div>
      </div>
   </div>
</div>

【问题讨论】：

你为什么使用背景图片而不是img标签？

这能回答你的问题吗？ Border-radius on background-image

【参考方案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;"  title="Plan rozwoju"></div>
                      </a>
                      </div>
                    </div>
                  </div>
</div>

【参考方案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>