❓❓❓ How to make an image so that only the center of the image is displayed, and not the whole image?

Question

Need to make a 100*100 round image. It works out. But how can I make it show only the center of the image?

//failed attempts in the attached code:
https://code.sololearn.com/WtnsFDNJ6ZsY/?ref=app

Answer 1

You can try to put the image as the background of a div, example:
background-image: url('path/to/your/ image.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;

Answer 2

This might be useful for you to read:
https://www.w3schools.com/css/css3_images.asp

Answer 3

Why not make a div container and position the image in it.

Answer 4

Thanks sanni olamide. w3schools.com is a great website

Answer 5

https://code.sololearn.com/W9Gd2kMajfHQ/?ref=app

I try to solve this by putting the image into a container. Change the proportion of the image. And positioning manually the image based on its x and y coordinates. Hope this help

Answer 6

Great link bro