img size when displaying alt text

Question

I have a collection of images on an HTML page. All of them have the width and height attibutes set:

<img id="pic128540" width="88" height="78" 
src="/document/show/0759122435f5333493726f9f1a845490?type=THUMBNAIL" 
alt="2561_66794361-ad70-4b09-9dc6-4bc2e7024378_max_550_800.jpg">

see: https://jsfiddle.net/papa_zulu/7vp4xvgc/

If, for some reasons, the file is missing the alt text is displayed. This is correct. But I would like the size of the picture to remain constant (kind of clip the overflow) as specified in the width and height parameters.

Is there any way to do it?

Answer 1

You could use CSS to achieve that. Using display:block; and overflow:hidden; . Additionally if you want to keep the images being displayed beside each other, use float:left; .

Try it yourself:

 img { float: left; display: block; overflow: hidden; }

 <img class="my-image" id="pic128540" width="88" height="78" src="http://via.placeholder.com/88x78" alt="2561_66794361-ad70-4b09-9dc6-4bc2e7024378_max_550_800.jpg"> <img class="my-image" id="pic128540" width="88" height="78" src="/document/show/0759122435f5333493726f9f1a845490?type=THUMBNAIL" alt="2561_66794361-ad70-4b09-9dc6-4bc2e7024378_max_550_800.jpg"> <img class="my-image" id="pic128540" width="88" height="78" src="http://via.placeholder.com/88x78" alt="2561_66794361-ad70-4b09-9dc6-4bc2e7024378_max_550_800.jpg">

If you also want to fit the alt text to the size of your container (here: image ), you could use a javascript function like the one defined here: Fit Text To Container - HTML/Javascript .

Answer 2

You can do that with css. Once you called your class "my-image", you could try it like this:

.my-image{
  min-width: 88 px;
  min-height: 78 px;
  display: block;
  overflow: hidden;

 }

Hope this helps!

Answer 3

这可以通过word-wrap: break-word;解决word-wrap: break-word;