gpt4 book ai didi

使用像素和百分比约束的 HTML 自动图像调整大小

转载 作者:太空狗 更新时间:2023-10-29 13:06:28 24 4
gpt4 key购买 nike

如何使用以下约束将图像添加到 HTML 页面:

  • 不允许放大(如果图片宽度为 400 像素,我不想将其调整为 600)。
  • 如果包含的元素小于图像,则应缩小图像。
  • 保持纵横比。

例如我有一张图片 (400x300)。如果包含元素的宽度为 600 像素,我想以 400x300 显示图像。如果包含元素的宽度为 200 像素(例如,它是一个移动浏览器),我想以 200x150 显示图像。

我正在寻找一种无需硬连接图像大小的纯 CSS 解决方案(如果可能的话)。

最佳答案

两次使用 max-width 属性都可以正常工作:

<div style="max-width: 400px" >
<img src="image.jpg" style="max-width:100%;" />
</div>

关于使用像素和百分比约束的 HTML 自动图像调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8895265/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com