border-radius: 50%
またはborder-radius: 999em
を使用しましたが、問題は同じです。正方形の画像では問題はありませんが、長方形の画像では楕円形の円が得られます。また、画像の一部をトリミングすることもできます(明らかに)。 <div>
でbackground-image
を使用せず、<img>
タグのみを使用して、純粋なCSS(または少なくともJavaScript/jQuery)でそれを行う方法はありますか?
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;
}
私の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>
Bootstrap 3を使用している人には、仕事をするのに最適なCSSクラスがあります。
<img src="..." class="img-circle">
border-radiusを使用して、正方形からのみ円を作成できます。
border-radiusは、高さも幅も増減しません。
あなたのリクエストは画像タグのみを使用することです。タグが正方形でない場合、基本的に不可能です。
空白の画像を使用し、bgに別の画像を設定する場合、設定する画像ごとに1つの背景がpainfullになります。
切り取りは、ラッパーが存在する場合にのみ実行できます。その場合、あなたはそれをする多くの方法を持っています
@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>
そのようにすることができます:
<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>
これは、高さと幅がわかっている場合に有効です。
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
以下は私のために働いた:
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>
私はこれとまったく同じ問題を調査してきましたが、背景として画像を持ち、その中にimgタグがあり、可視性がないか、このようなもの以外の適切な解決策を見つけることができませんでした。
追加できることの1つは、background-size: cover
をdivに追加して、余分な部分を切り取って画像が背景を埋めるようにすることです。