How to make the picture remain the same size, and when the size of the container in which it is changed to cut the picture is not at the bottom and left, but the same from all sides?

  • Show the code. Do you use bootstrap? - ʞɔᴉN ɹǝꓥ

1 answer 1

An example with a background, property background-size: cover;

.backgroundSize { width: 60vh; height: 40vh; border: 2px solid #000; background: url('https://l2banners.ru/img/video_prew/orbis.jpg') no-repeat center center; background-size: cover; } 
 <div class="backgroundSize"></div>

The same with the img tag, object-fit property : cover;

 .objectFit__img { -o-object-fit: cover; object-fit: cover; -o-object-position: 50% 50%; object-position: 50% 50%; width: 60vh; height: 40vh; } 
 <div class="objectFit"> <img src="https://l2banners.ru/img/video_prew/orbis.jpg" class="objectFit__img"> </div>

An example without changing the size of the picture itself, only centering and cropping on all sides that do not fit:

 .backgroundSize { width: 60vh; height: 40vh; border: 2px solid #000; background: url('https://l2banners.ru/img/video_prew/orbis.jpg') no-repeat center center; } 
 <div class="backgroundSize"></div>

The same with the img tag (one of the possible implementations):

 .object { width: 60vh; height: 40vh; position: relative; overflow: hidden; } .object__img { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } 
 <div class="object"> <img src="https://l2banners.ru/img/video_prew/orbis.jpg" class="object__img"> </div>