javascript - 如何设置图片的原始大小不超过父容器的宽度

标签 javascript css image

我想设置图片的原始宽度,所以max-width: 100%,但是图片的父容器宽度是1000px,图片的原始尺寸不能超过1000px。我希望图像的原始大小小于 1000px。如果图片宽度大于1000px,则设置图片大小为1000px

img {max-width: 100%, width: 100%};
.container {width: 1000px};

我设置了 image max-width: 100% 以便图像显示原始大小。我设置了 width: 100% 以防止图像的原始大小超过父容器的 1000px 宽度,但它不起作用

我希望图片的原始尺寸小于 1000 像素。如果图片宽度大于1000px,则设置图片大小为1000px

最佳答案

如果不希望图像超出容器,将 max-width: 100% 设置为 img 是正确的。

但是,您不必设置 img width: 100% 即可以原始大小显示图像。只需 width: auto 或者您可以跳过它,因为默认情况下图像的宽度是 auto

width: 100% 是指您的图像将缩放到当前父元素的 100%。这意味着 width: 100% 只会使您的图像放大或缩小到 1000 像素宽度。

只需取出width: 100%,即magic完成了。

关于javascript - 如何设置图片的原始大小不超过父容器的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58479049/

相关文章:

javascript - Backbone 模型 listenTo self

javascript - 使用 gulp-modernizr 如何设置配置文件?

python-3.x - 如何使用cv2使用python3提高图像回放的速度

python - Pygame 中的透明图像

java - 从 RGB 数据的 int 数组创建 PNG 文件

javascript - WebRTC Chrome 和 Firefox connection.setRemoteDescription

javascript - 将 javascript 变量从父级传递到 iframe

css - 哪个 CSS 选择器可用于选择处于包装状态的 flex box 元素?

html - 背景附件: fixed in ie10 causing image to jump

jquery - 重新设计 Pinterest 小部件?