如何使用窗口大小进行图像缩放答案

【问题标题】：how to do image scaling with window size如何使用窗口大小进行图像缩放
【发布时间】：2021-01-15 13:57:28
【问题描述】：

看起来很简单，但是……

用窗口大小缩放图像大小？

1)create a container for the image = entire window width, so container grows with window width
2)slap image inside the container
3)scale image based on % of the width of the container

HTML

<div class="imgEnclosure">
<img class="validatedImage"
     src="1776_Support/images/check_mark.png" alt="thisImage"
     onclick="SwapImages(this); return false" />
</div>

CSS

.imgEnclosure {
    width: 100%;
}

.validatedImage {
    /* original size (w,h) = 220px by 108px */
    
    /*
        1.0em = font-size: 24px from html Selector
        so ... original size = 9.167em by 4.500em
    */
    
    max-width: 30%;
    min-width: 10%;
    
    height: auto;
}

无论我如何更改浏览器窗口宽度，图像都显示相同的大小。

【问题讨论】：

标签： css image

【解决方案1】：

好悲伤...

代替：

max-width: 30%;
min-width: 10%;

使用

width: 30%;

老实说，我无法要求更简单的答案......即使我不明白为什么max-, min-width 响应不起作用？

【讨论】：

【解决方案2】：

我不确定它为什么不起作用，我认为这可能是父元素中的样式错误或从父元素转移到子元素的强制样式。

您是否尝试过放置

max-width: 30%; min-width: 10%;

在您的 .imgEnclosure 而不是 img 类本身？也许那也会奏效。我通常将位置样式放在父元素中，以便子元素可以轻松继承样式属性。

无论如何：请查看this，因为它可能会回答您的问题！希望这会有所帮助:)

【讨论】：

包含问题的答案很难处理和调整。请验证您是否可以通过修改问题的代码摘录或提供您自己的代码来提供一个工作示例。