显示替代文本时的 img 大小

Question

我在 HTML 页面上有一组图像。它们都设置了宽度和高度属性：

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

如果由于某些原因文件丢失，则显示替代文本。这是对的。但我希望图片的大小保持不变（一种剪辑溢出），如宽度和高度参数中指定的那样。

有什么办法吗？

Answer 1

您可以使用 CSS 来实现这一点。使用display:block;和overflow:hidden;。此外，如果您想保持图像并排显示，请使用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 函数：Fit Text To Container - HTML/Javascript。