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?

Use CSS. This is a very broad topic and will depend heavily on your style of approach and intended outcome. However it's always best to simply have the image there, or possibly use a placeholder image.... — Martin, Nov 23 '17 at 19:01
Martin, I would love to use css, but what selector should I use? — Pepe, Nov 23 '17 at 19:07

oRole · Accepted Answer · 2017-11-23T19:16:29.743

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.

Thank you! This answer is the most acurate to my problem. – Pepe Nov 23 '17 at 19:17 — Pepe, Nov 23 '17 at 19:17

Ronan Lopes · Answer 2 · 2017-11-23T19:53:22.657

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!

edited Nov 23 '17 at 19:53

answered Nov 23 '17 at 19:07

Ronan Lopes

3,320
4
25
51

Probably it should be max-*. Anyway, it does not work: https://jsfiddle.net/papa_zulu/7vp4xvgc/6 – Pepe Nov 23 '17 at 19:08
not really... that way it assures the mininum size as the image that would be placed there. Tried on fiddle example and looked nice to me – Ronan Lopes Nov 23 '17 at 19:10
@Pepe glad for helping! – Ronan Lopes Nov 23 '17 at 19:13
`88` whats?, `78` whats? – Martin Nov 23 '17 at 19:51
But then what if the original image is sized 188px/120px? – Martin Nov 23 '17 at 20:11

score 0 · Answer 3 · answered Apr 29 '20 at 15:54

0

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

answered Apr 29 '20 at 15:54

ricks

3,154
31
51

img size when displaying alt text

3 Answers3

Linked