Position an image correctly within a div

Asked

Viewed 1,765 times

3

Good morning, I’m trying to solve a problem: I have a circular div and when I insert an image it gets cropped:

html 

<div class="side-menu-user-info">
    <div class="side-menu-user-photo">

    </div>        
</div>

css

.side-menu-user-info{
  background: #FFF;
  display: block;
  height: 190px;
  border-bottom: 1px solid rgb(155, 158, 162);
  position: relative;
}

.side-menu-user-photo {
  border-radius: 50%;
  width: 40%;
  height: 100px;
  margin: 0 auto;
  position: relative;
  box-shadow: 1px 1px 10px;
  background-image: url("user-logo.png")
}

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

html css

2 answers

6


If you’re interested I solved it a little differently using flexbox css, see the example.

.side-menu-user-info{
      background: #FFF;
      display: block;
      height: 190px;
      border-bottom: 1px solid rgb(155, 158, 162);
      position: relative;
    }

.side-menu-user-photo {
  border-radius: 50%;
  width: 40%;
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 1px 1px 10px;
}

img {
  width: 100%;
  height: 100%
}
    <div class="side-menu-user-info">
        <div class="side-menu-user-photo">
            <img src="http://pluspng.com/img-png/user-png-icon-male-user-icon-512.png">
        </div>        
    </div>

  • Otavio, exactly what I needed, but when I try to use my image it overlaps the div and is on top!

  • How are you doing? just changed the image inside the tag?

  • Exactly, I used exactly its shape, but inside its <img> tag I put my image

  • creates a jsfidlle and sends me to see what happens

  • https://jsfiddle.net/sp7czfx2/1/# &#Xa

2

Since your image is as background you can treat it just with background-size and background-position. No need to tag <img> if you want, since in your code you use the image as backgound. Yet for using the width in % ends up getting deformed, I don’t know if that’s what you want...

.side-menu-user-info{
  background: #FFF;
  display: block;
  height: 190px;
  border-bottom: 1px solid rgb(155, 158, 162);
  position: relative;
}
    
.side-menu-user-photo {
  border-radius: 50%;
  width: 40%;
  height: 100px;
  margin: 0 auto;
  position: relative;
  box-shadow: 1px 1px 10px;
  background-image: url("https://image.flaticon.com/icons/png/512/61/61205.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
<div class="side-menu-user-info">
    <div class="side-menu-user-photo">

    </div>        
</div>

  • Hugo, thanks for the info! Tbm helped me a lot

  • @Fernandomunhoz cool that helped, if you want to continue using img as background this code solves. And if you want to avoid deformation in the image put it with the height = width... (width and height with the same value)

  • Hugo, I made an adaptation, as in the future this image will be changed according to the user’s option I should have the <img> inside my html and not background in css and when I put the direct img in html it gets immense

  • 1

    @Fernandomunhoz understood, as in your code was as background I respond with background. If you want image the other answer meets you believe

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.