All geek questions in one place

JavaScript / HTML: How to display an IMG with a given size, and if the image is larger or larger than this size to crop / hide the overflow?

I have a bunch of images that are guaranteed:

  • minimum width = 200px
  • maximum width = 250px
  • minimum height = 150px
  • maximum height = 175px

What I want to do is to display an image rectangle of 200 pixels by 150 pixels, keeping the scale (without stretching or compression).

That means I might have an overflow.

How can I display an image so that it retains porpotions to the original image size, but is displayed inside a window of 200x150 pixels in size and hides any overflow?

+3
source share
6

overflow: hidden.

+2

, ... -

<div style="width:Npx; height:Npx; overflow:hidden">
  <img src="source.png" style="width:Npx;">
</div>

, div Xpx Ypx, , "" , . , , . , . , , div, , . , .

:

, , , .

<div style="width:Npx; height:Npx; background:url(yourimage.png) center"></div>

...

+1

( ), nahum. 3 . , .

, ,

Jedidiah

  <span class="thumbnail" style="background-image:url(200_150.jpg);"></span>
  <span class="thumbnail" style="background-image:url(220_160.jpg);"></span>
  <span class="thumbnail" style="background-image:url(250_175.jpg);"></span>


  span.thumbnail{
    display:block; display:inline-block;
    width:200px; height:150px;
    background-position: center center;
    background-repeat: no-repeat;
  }
  • , div, IE6 + 7 : , .
  • : Firefox 2, .
+1

, (, ). , . gd imagemagick [0] - - , .

[0] http://php.net/manual/en/refs.utilspec.image.php

0

, , clip CSS - , , - :

<html>
  <head>
    <style type="text/css">
    .thumbnail {
      width:200px;
      height:150px;
    }
    .thumbnail img {
      position:absolute;
      clip:rect(0, 200px, 150px, 0);
    }
    </style>
  </head>
  <body>
        <div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
        <div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
        <div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
        <div class="thumbnail"><img src="http://uhaweb.hartford.edu/SDUNN/sandwich.jpg"></div>
  </body>
</html>

The fact that this pulls out images from the document stream is rather unpleasant - the best thing you can do is put them in the right size frames (this means that you can just use the overflow mask methods suggested by other people). A clip is a useful feature in the right places, and many people do not seem to know about it.

0
source

Just set min-height:whateverboth max-height:whateverand overflow:hiddenon the blocks, and then just put the images in the block and do it.

0
source

Source: https://habr.com/ru/post/1744279/

More articles:


All Articles