显示 alt 文本时的 img 大小答案

【问题标题】：img size when displaying alt text显示 alt 文本时的 img 大小
【发布时间】：2018-05-07 19:09:39
【问题描述】：

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

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

有什么办法吗？

【问题讨论】：

使用 CSS。这是一个非常广泛的主题，很大程度上取决于您的方法风格和预期结果。但是，最好只是将图像放在那里，或者可能使用占位符图像....
Martin，我很想使用 css，但我应该使用什么选择器？

标签： html css

【解决方案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。

【讨论】：

谢谢！这个答案对我的问题最准确。

【解决方案2】：

你可以用 css 做到这一点。一旦你把你的类称为“my-image”，你可以这样尝试：

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

 }

希望这会有所帮助！

【讨论】：

可能应该是 max-*。无论如何，它不起作用：jsfiddle.net/papa_zulu/7vp4xvgc/6
不是真的......那样它可以确保最小尺寸作为将放置在那里的图像。尝试了小提琴示例，对我来说看起来不错
@Pepe 很高兴为您提供帮助！
88whats?, 78whats?
但是如果原始图像的大小是 188px/120px 呢？

【解决方案3】：

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

【讨论】：