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。

Answer 2

你可以用css做到这一点。一旦你打电话给你的班级“我的形象”，你可以这样试试：

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

 }

希望这有帮助！

Answer 3

这可以通过writer

解决

显示替代文字时的img大小

3 个答案: