web-dev-qa-db-ja.com

CSSで長方形の画像を円形に表示する方法

border-radius: 50%またはborder-radius: 999emを使用しましたが、問題は同じです。正方形の画像では問題はありませんが、長方形の画像では楕円形の円が得られます。また、画像の一部をトリミングすることもできます（明らかに）。 <div>でbackground-imageを使用せず、<img>タグのみを使用して、純粋なCSS（または少なくともJavaScript/jQuery）でそれを行う方法はありますか？

htmlcsscss-shapes
63
Jennifer Vandoni

background-imageの問題は、スタイルシート内の各画像のソースが非効率的になることだと思います。私の提案は、ソースをインラインに設定することです：

<div style = 'background-image: url(image.gif)'></div>

div {
    background-repeat: no-repeat;
    background-position: 50%;
    border-radius: 50%;
    width: 100px;
    height: 100px;
}

Fiddle

55
fzzle

私の2セントは、唯一の答えに対するコメントがちょっとおかしくなってきたからです。これは私が通常行うことです。円の場合は、正方形から始める必要があります。このコードは正方形を強制し、画像を引き伸ばします。画像が少なくとも丸いdivの幅と高さになることがわかっている場合は、imgスタイルルールを削除して、ストレッチせずに切り取るだけにすることができます。

<html>
    <head>
        <style>
            .round {
                border-radius: 50%;
                overflow: hidden;
                width: 150px;
                height: 150px;
            }
            .round img {
                display: block;
            /* Stretch 
                  height: 100%;
                  width: 100%; */
            min-width: 100%;
            min-height: 100%;
            }
        </style>
    </head>
    <body>
        <div class="round">
            <img src="image.jpg" />
        </div>
    </body>
</html>
38
David

Bootstrap 3を使用している人には、仕事をするのに最適なCSSクラスがあります。

<img src="..." class="img-circle">
12
Aron Lorincz

border-radiusを使用して、正方形からのみ円を作成できます。

border-radiusは、高さも幅も増減しません。

あなたのリクエストは画像タグのみを使用することです。タグが正方形でない場合、基本的に不可能です。

空白の画像を使用し、bgに別の画像を設定する場合、設定する画像ごとに1つの背景がpainfullになります。

切り取りは、ラッパーが存在する場合にのみ実行できます。その場合、あなたはそれをする多くの方法を持っています

4
G-Cyr

@fzzleからの答えに基づいて-長方形から円を達成するために固定の高さまたは幅を定義せずにを実行すると、次のようになります。 padding-top：100％は、サークルクロップdivの比率を1：1に保ちます。インラインの背景画像を設定して中央に配置し、background-size：coverを使用して余分な部分を隠します。

CSS

.circle-cropper {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%;
  border-radius: 50%;
  width: 100%;
  padding-top: 100%;
}

HTML

<div class="circle-cropper" role="img" style="background-image:url(myrectangle.jpg);"></div>
3
paddyfields

そのようにすることができます：

    <html>
<head>
    <style>
        .round {
            display:block;
            width: 55px;
            height: 55px;
            border-radius: 50%;
            overflow: hidden;
            padding:5px 4px;
        }
        .round img {
            width: 45px;
        }
    </style>
</head>
<body>
    <div class="round">
        <img src="image.jpg" />
    </div>
</body>
2
visualfeaster

これは、高さと幅がわかっている場合に有効です。

img {
  object-fit: cover;
  border-radius: '50%';
  width: 100px;
  height: 100px;
}

経由 https://medium.com/@chrisnager/center-and-crop-images-with-a-single-line-of-css-ad140d5b4a87

1
user2634633

以下は私のために働いた：

CSS

.round {
  border-radius: 50%;
  overflow: hidden;
  width: 30px;
  height: 30px;
  background: no-repeat 50%;
  object-fit: cover;
}
.round img {
   display: block;
   height: 100%;
   width: 100%;
}

HTML

<div class="round">
   <img src="test.png" />
</div>
1
Qasim

私はこれとまったく同じ問題を調査してきましたが、背景として画像を持ち、その中にimgタグがあり、可視性がないか、このようなもの以外の適切な解決策を見つけることができませんでした。

追加できることの1つは、background-size: coverをdivに追加して、余分な部分を切り取って画像が背景を埋めるようにすることです。

0
Krynble