Here is what I have:

.container { margin: 30px; } .container div { width: 140px; height: 140px; position: relative; border: 2px solid red; display: inline-block; margin: 0 30px; vertical-align: top; } div img { background: blue; position: absolute; top: 0; bottom: 0; margin: auto; width: 140px; } 
 <div class='container'> <div> <img src="https://farm2.staticflickr.com/1714/25563378972_4eaa0b6812_z.jpg" /> </div> <div> <img src="https://farm9.staticflickr.com/8741/17481366771_4817578296_z.jpg" /> </div> </div>

But what I want to get:

Result

That is, the visible part of the horizontal image should also be in the center. I use overflow: hidden and hide the extra part of the image.

  • Image size initially unknown - Shuhratjon Jumaev

4 answers 4

 .container { margin: 30px; } .container div { width: 140px; height: 140px; position: relative; border: 2px solid red; display: inline-block; margin: 0 30px; vertical-align: top; background-position: center; background-size: cover; } 
 <div class='container'> <div style="background-image:url(//farm2.staticflickr.com/1714/25563378972_4eaa0b6812_z.jpg)"></div> <div style="background-image:url(//farm9.staticflickr.com/8741/17481366771_4817578296_z.jpg)"></div> </div>

  • I need it through <img> - Shuhratjon Jumaev
  • @Shuhratjon Jumaev as far as I can tell, if you want the pictures to be the img tag, then you cannot do without a script that will determine the orientation of the image and depending on this, enter the picture into the block and position it. and why you, by the way. option with background-image not suitable? - Heidel
  • @Heidel the fact is that I use the photoswipe library and it needs to img - Shuhratjon Jumaev
  • @ShuhratjonJumaev, try poshamanit with this approach: ru.stackoverflow.com/a/480545/178988 Moreover, the square has some special features. - Qwertiy ♦

The solution to this issue turned out to know in advance the width and height of the image and give margin s to minus via php.
For this, I created a function:

 function beautyImg($img, $w, $h) { $img = (substr($img, 0, 1) == '/' && substr($img, 0, 4) !='http') ? substr(base_url(), 0, -1) .$img : $img; list($width, $height) = getimagesize($img); $scale_ratio = $width / $height; $sr = $w / $h; ?> <img style="<?php echo ($scale_ratio < $sr) ? 'width:' .$w .'px;margin-top:-' .intval((intval($w / $scale_ratio) - $h) / 2) .'px': 'height:' .$h .'px;margin-left:-' .intval(($h * $scale_ratio - $w) / 2) .'px'; ?>" src="<?php echo $img; ?>"/> <?php }

The function must be transferred to the image, the width and height of the block in which the image is displayed.
Block example:

 .photo_item_gallery { position: relative; width: 165px; height: 105px; margin: 3px; overflow: hidden; display: inline-block; vertical-align: top; border-radius: 2px; } 
 <a data-id="6" class="photo_item_gallery" href="http://dastitu.tk/images/id1/1/3fcc2a2f68f23597a4c490e0a06f2a12_original.jpg" data-size="1127x869" data-med="/images/id1/1/3fcc2a2f68f23597a4c490e0a06f2a12.jpg" data-med-size="600x462" data-author=""> <img style="width:165px;margin-top:-10px" src="https://pp.vk.me/c636123/v636123614/218d8/agFh1j9sIAY.jpg"> <figure> Dubai is the future</figure> </a>

    Edited your CSS:

     .container { margin: 30px; } .container div { width: 140px; height: 140px; position: relative; border: 2px solid red; display: inline-block; margin: 0 30px; vertical-align: top; } div img { position: absolute; height: 100%; width: 100%; } 
     <div class='container'> <div> <img src="https://farm2.staticflickr.com/1714/25563378972_4eaa0b6812_z.jpg" /> </div> <div> <img src="https://farm9.staticflickr.com/8741/17481366771_4817578296_z.jpg" /> </div> </div>

    • This scaling is not proportional. - Qwertiy ♦
    • @Qwertiy With scaling then: codepen.io/bustexz/pen/KzypWX as the second answer in this question. Approaches are different. I stretched, someone preserved the proportions, maybe the pictures will be identical in size and then my option can also come up, since it uses images via <img /> , not background-image . - Vasily Barbashev
    • in this case, the pictures do not look beautiful @ Vasily Barbashev - Shuhratjon Jumaev

    As an option )

     .container { margin: 30px; overflow: hidden; } .container .wrap { width: 140px; height: 140px; position: relative; border: 2px solid red; margin: 0 30px; vertical-align: top; text-align: center; display: table; float: left; } .container .wrap .inner-wrap { display: table-cell; vertical-align: middle; } .container .wrap .inner-wrap img { max-width: 140px; max-height: 140px; display: block; margin: 0 auto; } 
     <div class='container'> <div class="wrap"> <div class="inner-wrap"> <img class="img1" src="https://farm2.staticflickr.com/1714/25563378972_4eaa0b6812_z.jpg" /> </div> </div> <div class="wrap"> <div class="inner-wrap"> <img class="img2" src="https://farm9.staticflickr.com/8741/17481366771_4817578296_z.jpg" /> </div> </div> </div>

    • empty areas are not needed, I wanted to get rid of them @Heidel - Shuhratjon Jumaev