it-swarm.com.de

Wie kann ich das Benutzerprofil im Kreis anzeigen?

Ich entwickle eine Website, auf der das Profilbild der Benutzer in einem Kreis angezeigt werden muss. Es gibt viele Kreise auf dieser Seite und die Kreisgröße kann variieren.

Ich kann quadratische Bilder richtig anzeigen, aber bei vertikalen und horizontalen Bildern habe ich ein Problem.

Ich muss das Bild in einem Kreis mit den folgenden Kriterien anzeigen:

  • Angenommen, die Bildgröße ist 500x300. Das Bild sollte 100 Pixel von der rechten und linken Seite abschneiden, so dass die Bildmitte angezeigt wird. Jetzt sollte das Bild 300x300 zentriert sein. Dann muss ich aus diesem Bild einen Kreis machen. OR blendet 100px rechts und links des Bildes mit CSS aus.
  • Wenn die Bildgröße 300x500 ist, sollten der obere und untere Bereich mit CSS ausgeblendet werden

Was muss ich tun, um das Problem zu beheben? Antworten nur für CSS sind für mich am besten, wenn möglich.

26
harsh4u

background-size

MDN - CSS-Tricks - Kann ich verwenden

Da die Bildgrößen variabel sind, möchten Sie sicherstellen, dass sie cover das div sowie centered darin sind.

Durch Hinzufügen des border-radius: 50%; erhalten Sie den Kreiseffekt.

.user {
  display: inline-block;
  width: 150px;
  height: 150px;
  border-radius: 50%;

  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.one {
  background-image: url('http://placehold.it/400x200');
}

.two {
  background-image: url('http://placehold.it/200x200');
}

.three {
  background-image: url('http://placehold.it/200x400');
}
<div class="user one">
</div>

<div class="user two">
</div>

<div class="user three">
</div>

In der Praxis möchten Sie nicht, dass für jedes Bild eine Klasse vorhanden ist. In der Markierung wird ein Inline-Stil angegeben:

<div class="user" style="background-image:url('path/to/user/img.png')"></div>

object-fit

MDN - CSS-Tricks - Kann ich verwenden

Eine neuere Alternative ist die Verwendung der object-fit-Eigenschaft für ein reguläres <img>-Tag. Dies funktioniert nicht in IE oder älteren Versionen von Edge.

.user {
  display: inline-block;
  width: 150px;
  height: 150px;
  border-radius: 50%;

  object-fit: cover;
}
<img src="http://placehold.it/400x200" class="user">
<img src="http://placehold.it/200x200" class="user">
<img src="http://placehold.it/200x400" class="user">

49
Luke

setze das Bild als Hintergrund, zentriert.

<div class="image"></div>

css:

.image{
  width: 300px;
  height: 300px;
  border-radius: 50%; /*don't forget prefixes*/
  background-image: url("path/to/image");
  background-position: center center;
  /* as mentioned by Vad: */
  background-size: cover;
}

Geige

7
LuudJacobs
<html>  
<head>
<style>
#circle
{
border-radius:50% 50% 50% 50%;  
width:300px;
height:300px;
}
</style>
</head>
<body>
<img src="skin-tone.jpg"
id="circle">
</body>
</html>
0
Aadil Masavir

Wenn Sie bootstrap verwenden, haben Sie class img-circle, um dies zu tun.

0
Nithya Sundar