img size when displaying alt text

user_2405470 0
Viewed 2226

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?

css html
3 Answers

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.

user_79708290

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!

user_58649850

This can be resolved with word-wrap: break-word;

user_64601220
Related