Ik heb border-radius: 50%of border-radius: 999emgebruikt, maar het probleem is hetzelfde: met vierkante afbeeldingen is er geen probleem, maar met rechthoekige afbeeldingen krijg ik een ovale cirkel. Ik ben ook geneigd om een deel van de afbeelding bij te snijden (uiteraard). Is er een manier om dat te doen met pure CSS (of in ieder geval JavaScript / jQuery), zonder een <div>met een background-imagete gebruiken, maar alleen met de <img>-tag?
Antwoord 1, autoriteit 100%
Ik neem aan dat uw probleem met background-imageis dat het inefficiëntzou zijn met een bron voor elke afbeelding in een stylesheet. Mijn suggestie is om de bron inline in te stellen:
<div style = 'background-image: url(image.gif)'></div>
div {
background-repeat: no-repeat;
background-position: 50%;
border-radius: 50%;
width: 100px;
height: 100px;
}
Antwoord 2, autoriteit 68%
Mijn 2 cent omdat de opmerkingen voor het enige antwoord een beetje gek worden. Dit is wat ik normaal doe. Voor een cirkel moet je beginnen met een vierkant. Deze code forceert een vierkant en zal de afbeelding uitrekken. Als je weet dat de afbeelding minimaal de breedte en hoogte van de ronde div zal hebben, kun je de imgstijlregels verwijderen, zodat deze niet wordt uitgerekt maar alleen wordt afgesneden.
<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>
Antwoord 3, autoriteit 21%
Voor degenen die Bootstrap 3 gebruiken, het heeft een geweldige CSS-klasse om het werk te doen:
<img src="..." class="img-circle">
Antwoord 4, autoriteit 7%
je kunt alleen cirkel van vierkant maken met border-radius.
borderradius vergroot of verkleint de hoogte of breedte niet.
Uw verzoek is om alleen afbeeldingstag te gebruiken, het is in principe niet mogelijk als de tag geen vierkant is.
Als je een blanco afbeelding wilt gebruiken en een andere in bg wilt zetten, wordt het lastig om voor elke afbeelding één achtergrond in te stellen.
Bijsnijden kan alleen als er een wikkel is om dit te doen. in dat geval heb je veel manieren om het te doen
Antwoord 5, autoriteit 7%
Voortbouwend op het antwoord van @fzzle – om een cirkel uit een rechthoek te maken zonder een vaste hoogte of breedte te definiëren, zal het volgende werken. De padding-top:100% behoudt een 1:1 verhouding voor de circle-cropper div. Stel een inline achtergrondafbeelding in, centreer deze en gebruik background-size:cover om eventuele overschrijdingen te verbergen.
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>
Antwoord 6, autoriteit 4%
Je kunt het zo maken:
<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>
Antwoord 7, autoriteit 4%
Deze werkt goed als je hoogte en breedte kent:
img {
object-fit: cover;
border-radius: '50%';
width: 100px;
height: 100px;
}
via https ://medium.com/@chrisnager/center-and-crop-images-with-a-single-line-of-css-ad140d5b4a87
Antwoord 8, autoriteit 2%
Het volgende werkte voor mij:
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>
Antwoord 9
Ik heb hetzelfde probleem onderzocht en kon geen andere fatsoenlijke oplossing vinden dan de div met de afbeelding als achtergrond en de img-tag erin met zichtbaarheid geen of iets dergelijks.
Eén ding dat ik zou kunnen toevoegen is dat je een background-size: coveraan de div moet toevoegen, zodat je afbeelding de achtergrond vult door het overtollige weg te knippen.
Antwoord 10
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<style>
.round_img {
border-radius: 50%;
max-width: 150px;
border: 1px solid #ccc;
}
</style>
<script>
var cw = $('.round_img').width();
$('.round_img').css({
'height': cw + 'px'
});
</script>
</head>
<body>
<img class="round_img" src="image.jpg" alt="" title="" />
</body>
</html>