Question

我正在制作一个响应式设计网站。我想做的是，我的徽标的窗口高度始终为15％。这会导致移动设备出现问题，因为我的徽标有点长。

当我们用完水平房间时，我希望徽标开始缩小。以下是我到目前为止的情况：

<img style="height: 15%; max-width: 100%" src="logo.png"/>

这在常规屏幕上看起来很好，但是当我向下缩小时，它会水平缩小，但不会垂直缩小（徽标恰好在右侧有几个alpha像素）：

正如你所知，这是不可取的，我希望在这种情况下高度与宽度成比例。

Answer 1

在这种情况下，我强烈建议您使用媒体查询。

您可以使用媒体查询来更改不同分辨率的属性值。

找到徽标中断的断点，使用媒体查询在徽标上设置max-width和max-height。

您希望通过为其分配ID来具体定位您的徽标，如下所示：

<img src="logo.png" id="logo">

然后，使用媒体查询徽标。此示例在常用移动设备上设置徽标的最大高度和宽度：

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
#logo {
max-width:20px;
max-height: 20px;
}

您仍然可以在媒体查询中使用百分比或像素，只需使用它直到看起来不错：）

Answer 2

如果您想要高度始终为15％，那么您正在寻找vh，一个相对于视口高度的单位：

<img style="height: 15vh;">

请注意这一点，因为如果您开始弄乱高度和宽度尺寸，图像可能会变形。如果您希望图像具有响应性，则通用方法为：width：100％，height：auto。

Answer 3

我想出了一个使用Javascript的解决方案：

<div id="logocontainer" style="width: 100%; padding: 10px; background-color: #4CAF50;">
    <img id="logo" class="logo" src="assets/neon-orb/logo-large.png"/>
    <script>
        function getViewport() { // taken from: http://stackoverflow.com/a/2035211/3171100

            var viewPortWidth;
            var viewPortHeight;

            // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
            if (typeof window.innerWidth != 'undefined') {
                viewPortWidth = window.innerWidth,
                viewPortHeight = window.innerHeight
            }

            // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
            else if (typeof document.documentElement != 'undefined'
                    && typeof document.documentElement.clientWidth !=
                    'undefined' && document.documentElement.clientWidth != 0) {
                viewPortWidth = document.documentElement.clientWidth,
                viewPortHeight = document.documentElement.clientHeight
            }

            // older versions of IE
            else {
                viewPortWidth = document.getElementsByTagName('body')[0].clientWidth,
                viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
            }
            return [viewPortWidth, viewPortHeight];
        }

        var resize = function(){
            var logoWidth = $("#logo").get(0).offsetWidth;
            var logoContainerWidth = $("#logocontainer").get(0).offsetWidth;

            var logoHeight = $("#logo").get(0).offsetHeight;
            var windowHeight = getViewport()[1];
            console.log($("#logocontainer").css("padding-left"));
            if(logoWidth > logoContainerWidth - parseFloat($("#logocontainer").css("padding-left")) - parseFloat($("#logocontainer").css("padding-right"))){
                $("#logo").css("height", "auto");
                $("#logo").css("width", "100%");
            } else if(logoHeight / windowHeight > 0.15){
                $("#logo").css("height", "15vh");
                $("#logo").css("width", "auto");
            }
        };

        $(window).resize(resize);

        $("#logo").css("height", "15vh");
        $("#logo").css("width", "auto");

        resize();
    </script>
</div>

图像高度为15％，当屏幕尺寸小于图像宽度宽时，刻度高度？

3 个答案: