Question 199391 in Html Question posted in
Some basic documentation can be found here.

Html – Fit one image into another image

enter image description here

I’m trying to fit jerry mouse image in the boundary image, but unable to do it

like this
this i want to achieve

what I have done here is –>

taken one parent div in which I have one image tag with boundary image, and trying to put mickey mouse image in the bacground of boundary image,

my index.html file

<body>
    <div class="parent">
        <img src= "images/circle-2.png" class = "boundary"/>
    </div>
</body>

my app.css file

.boundary{
    width : 300px;
    height:  300px;
    width: fit-content;
    background-repeat: no-repeat;
    background-image: url(./images/mickey.jpeg);
    background-position: center;
    background-size: 69%;
    background-clip: content-box;

}

div {
    display: flex;
    justify-content: center;
  }

Thanku in advance

Tags:

2

Answers


  1. 0

    You could achieve this using background-size: contain;.

    .boundary{
    width : 300px;
    height:  300px;
    width: fit-content;
    background-repeat: no-repeat;
    background-image: url("https://static.vecteezy.com/system/resources/previews/023/814/090/non_2x/cartoon-character-in-free-png.png");
    background-size: contain;
    background-position: center;
}

div {
    display: flex;
    justify-content: center;
  }
    <body>
    <div class="parent">
        <img src= "https://static.vecteezy.com/system/resources/previews/001/192/291/non_2x/circle-png.png" class = "boundary"/>
    </div>
</body>
    Login or Signup to reply.
  2. 0

    I’m not 100% sure exactly what the criterias are. The key CSS property/value responsible for the circle is: border-radius: 50%.

    :root {
  font: 5vmin/1 Consolas;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

figure {
  display: block;
  width: 15rem;
  height: 15rem;
  padding: 0;
  border: 1rem solid rgba(155, 114, 82, 0.7);
  border-radius: 50%;
  background: url(https://i.ibb.co/hZj77BZ/lena01.jpg) center center / cover content-box;
}
    <main>
  <figure></figure>
</main>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search