显示替代文字时的img大小 [英] img size when displaying alt text

问题描述

我在HTML页面上有一组图像.它们都设置了宽度和高度服装:

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">

请参阅: https://jsfiddle.net/papa_zulu/7vp4xvgc/

如果由于某些原因缺少文件，则显示alt文本.这是对的.但是我希望图片的尺寸保持不变(宽度和高度参数中指定)(剪裁溢出).

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.

有什么办法吗?

推荐答案

您可以使用CSS来实现.使用 display:block; 和 overflow:hidden; .另外，如果要使图像彼此并排显示，请使用 float:left; .

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;.

亲自尝试:

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">

如果您还想使 alt 文本适合容器的大小(此处为 image )，则可以使用一种javascript函数，如此处定义的那样:将文本适合容器-HTML/Javascript .

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.

这篇关于显示替代文字时的img大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！