Question

看起来很简单，但是...

根据窗口大小缩放图像大小？

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;
}

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

Answer 1

好悲伤...

代替：

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

使用

width: 30%;

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

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

1 个答案: