Does anyone know the crop property, which customizes the photo to fit the frame size and what attributes it has, I just heard, but did not find it in the reference books?

  • @kff, clip seems to be off topic? - Qwertiy ♦

3 answers 3

Use

 object-fit: cover; width: 100%; height: 100%;

In the example, I specifically set the height of the block to be less than the width, while the image is horizontal. A part of the image is cut out and completely covers the entire block.

Play block sizes, you will see.

 .photo_frame { width: 300px; height: 500px; border: 3px blue solid; } .photo_frame img { object-fit: cover; width: 100%; height: 100%; } 
 <div class="photo_frame"> <img src="http://profismart.org/album/02/Priroda_144.jpg"> </div>

  • So I remembered o_O ... - Qwertiy ♦

Most likely you meant the object-fit: cover property object-fit: cover . However, the fact is that this property does not work in IE and Edge. Therefore, I advise you to set the image as a background and use the background-size: cover property. Example:

 .background { background: url("http://1000.tech/img/bg0.jpg") no-repeat 50% / cover; height: 200px; width: 500px; } 
 <div class="background"></div>

  • and what if you need to do it not somewhere on the site, but in the menu where the picture is selected from the database using php, as in this code - Dem
  • <code> <div class = "image-block"> <! - <a title = "<? php // echo $ product-> product_name?>" href = "<? php // echo $ product-> link . $ ItemidStr;?> "> <? Php // echo $ product-> images [0] -> displayMediaThumb ('class =" browseProductImage "', false); ?> </a> -> <? php if (count ($ product-> images) == 1):?> <a class="product-image" href="<?php echo $pLink; ?> "title =" <? php echo $ pName;?> "> <span class =" pro-image first-image "> <img class =" browseProductImage "src =" <? php echo $ pImage;?> "alt = "<? php echo $ pName;?>" title = "<? php echo $ pName;?>" /> </ code> - Dem
  • <code> <? php endif; ?> <? php if (count ($ product-> images)> = 2):?> <a class="product-image2" href="<?php echo $pLink; ?> "title =" <? php echo $ pName;?> "> <span class =" pro-image first-image "> <img class =" browseProductImage "src =" <? php echo $ pImage;?> "alt =" <? php echo $ pName ;?> "title =" <? php echo $ pName;?> "/> </ span> <span class =" pro-image second-image "> <img class =" browseProductImage "src =" <? php echo $ pImage_second;?> "alt =" <? php echo $ pName;?> "title =" <? php echo $ pName;?> "/> </ span> </a> <? php endif; ?> </ div> </ code> - Dem

There is no crop , but there is a background-size with the value of cover .