html - 如何在html标签中显示适合DIV的肖像图像?

标签 html css

我有肖像图像,我想以相同的比例放入 DIV 标签中。 您可以在下面的链接中找到示例图片

http://www.megafileupload.com/4Loy/img.png

最佳答案

如果想保持 DIV 的高度和宽度并使图像适合 DIV,同时保持图像比例,那么您的代码已经这样做了。

参见 jsfiddle添加的边框显示图像如何不会变大,因为它已经填充了父 DIV 高度。

如果您想更改它以便 DIV 高度对图像属性使用react,请删除 DIV 高度并添加以下 img 规则:

img {width: 100%; height: auto;}

这将在保持图像比例的同时填充父容器的宽度,DIV 高度将自动使用react以适应图像。

示例 2:jsfiddle

关于html - 如何在html标签中显示适合DIV的肖像图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31336551/

相关文章:

html - SCSS - 从一组样式中排除指定的容器

javascript - 如何通过 jQuery 获取 P 元素直到下一个 H2 元素?

java - 如何使用OSGI远程查看html文件

javascript - 防止在 Facebook 嵌入 iframe 上进行大量 xhr/ajax 调用

html - 无法在第一个和最后一个 child 上进行异常形状的悬停

css - 特定的 CSS 值

html - Bootstrap 4 图像网格对齐

javascript - 每页上的序列号相同

html - Firefox 在 css 边距填充中显示奇怪的行为不起作用

html - 如何对齐图像下方的标题