尝试使用HTML和CSS循环裁剪图像 [英] Trying to circular crop image with HTML and CSS

问题描述

我意识到还有另一个线程可以解决这个问题，但是我在执行某些针对特定情况的建议时遇到问题。截至目前我有点试验，但会很感激任何建议。以下是我想要在一个圆圈内裁剪的肖像截图： http://imgur.com/autCwaj

尽管我可能偏离了目标，但我的代码如下 -

HTML：

 < section class =hero> 
< div class =content> 
< div class =image-cropper> 
 < / div> 
< p class =iama>我的名字是...< / p> 
< p class =my-name my-info>杰森大脑< / p> 
< p class =iama>我想成为（最终）...< / p> 
< p class =my-info>前端，完整堆栈和iOS开发者< / p> 
< / div> 
< / section> 
  

CSS：

  .image-cropper {
 width：100px; 
 height：100px; 
职位：亲属; 
} 
 
 .my-picture {
 display：block; 
 margin：0 auto; 
身高：100％; 
 width：auto; 
 border：2px纯白色; 
 -webkit-border-radius：50％; 
 -moz-border-radius：50％; 
 border-radius：50％; 
} 
  

感谢您的协助。

如果你想要一个圆而不是椭圆，你需要重新排列一些CSS。外部div需要是正方形，图像需要将其两个维度中的小部分拉伸到100％的水獭div。

.image -cropper {width：100px; height：100px;位置：相对;边框：2px纯白色; -webkit-border-radius：50px; -moz-border-radius：50px; border-radius：50px; overflow：hidden;}。my-picture {display：block;保证金：0汽车;身高：自动;宽度：100％;}

< section class =英雄> < div class =content> < div class =image-cropper> < img class =my-picturesrc =http://imageweb-cdn.magnoliasoft.net/bridgeman/supersize/xir245162.jpgalt =这是我的照片/> < / DIV> < p class =iama>我的名字是...< / p> < p class =我的名字我的信息>杰森大脑< / p> < p class =iama>我想成为（最终）...< / p> < p class =my-info>前端，完整堆栈和iOS开发者< / p> < / div>< / section>

I realize there is another thread that addresses this issue, but I'm having trouble implementing some of the suggestions to my particular situation. As of now I'm kind of experimenting but would appreciate any suggestions. Here is a screenshot of the portrait that I want cropped in a circle: http://imgur.com/autCwaj

Although I may be way off course, my code is as follows--

The HTML:

<section class="hero">
    <div class="content">
        <div class="image-cropper">
            <img class="my-picture" src="http://imageweb-cdn.magnoliasoft.net/bridgeman/supersize/xir245162.jpg" alt="This is a picture of me">
        </div>
        <p class="iama">My name is...</p>
        <p class="my-name my-info">Jason Brain</p>
        <p class="iama">I want to be (eventually)...</p>
        <p class="my-info">A front end, full stack, and iOS developer</p>
    </div>
</section>

The CSS:

.image-cropper {
  width: 100px;
  height: 100px;
  position: relative;
}

.my-picture {
  display: block;
  margin: 0 auto;
  height: 100%;
  width: auto;
  border: 2px solid white;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

Thanks for your assistance everyone.

解决方案

If you want a circle instead of an oval, you'll need to rearrange some CSS. The outer div needs to be square and the image needs to stretch the small of its two dimensions to 100% of the otter div.

.image-cropper {
    width: 100px;
    height: 100px;
    position: relative;
    border: 2px solid white;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    overflow:hidden;
}
.my-picture {
    display: block;
    margin: 0 auto;
    height: auto;
    width: 100%;
}

<section class="hero">
    <div class="content">
        <div class="image-cropper">
            <img class="my-picture" src="http://imageweb-cdn.magnoliasoft.net/bridgeman/supersize/xir245162.jpg" alt="This is a picture of me"/>
        </div>
        <p class="iama">My name is...</p>
        <p class="my-name my-info">Jason Brain</p>
        <p class="iama">I want to be (eventually)...</p>
        <p class="my-info">A front end, full stack, and iOS developer</p>
    </div>
</section>

这篇关于尝试使用HTML和CSS循环裁剪图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！