CSS:适合圆形(圆形)图像(请勿拉伸) [英] css: fit rounded (circle) image (do not stretch it)

问题描述

例如，我有这样的图像:

For example I have such images:

和CSS:

.company-header-avatar{
    width: 60px;
    height: 60px;
    -webkit-border-radius: 60px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 60px;
    -moz-background-clip: padding;
    border-radius: 60px;
    background-clip: padding-box;
    margin: 7px 0 0 5px;
    float: left;
}

结果我得到:

但是他们很紧张.有什么方法可以使它们变圆但不拉伸吗? (例如，从中间拿出一部分，等等)

But they are stretched. Are there any ways to make them rounded, but without stretching? (for example, get part from middle, etc)

提琴:

http://jsfiddle.net/73h7try9/

推荐答案

我建议将具有background-image的图像应用于div，然后应用background-size: cover以确保无论图像的原始大小/比率如何，该比率均保持正确:

I recommend applying the images with background-image to a div and then applying background-size: cover to ensure the ratio stays correct regardless of the image's original size/ratio:

JS小提琴

HTML

<div class="company-header-avatar" style="background-image: url(https://dl.dropboxusercontent.com/u/59666091/6E06C3D.jpeg)"></div>

<div class="company-header-avatar" style="background-image: url(https://dl.dropboxusercontent.com/u/59666091/8WluhcUlWl8.jpg)"></div>

CSS

.company-header-avatar{
    width: 60px;
    height: 60px;
    -webkit-border-radius: 60px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 60px;
    -moz-background-clip: padding;
    border-radius: 60px;
    background-clip: padding-box;
    margin: 7px 0 0 5px;
    float: left;
    background-size: cover;
    background-position: center center;
}

这篇关于CSS:适合圆形(圆形)图像(请勿拉伸)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！