图片不会使用媒体查询来调整大小

Question

I am trying to resize an image on a html page when it is displayed on a browser. 我正在尝试调整html页面在浏览器上显示时的图像大小。

The HTML used us as follows; HTML使用我们的方式如下：

<body class="layout-4">
    <div id="wrapper">
        <header id="header">
            <div class="container">
                <div class="row">
                    <div class="col-sm-2">
                        <div class="site-logo">
                            <img class="logoimage" src="assets/images/emailsig.png" alt="Logo Image" />
                        </div>
                    </div>
                    <div class="col-sm-10 align-right">
                        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#main-menu">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <nav id="main-menu" class="collapse" role="navigation">
                            <ul class="nav-menu clearfix">
                                <li><a href="#wrapper">Home</a></li>
                                <li><a href="#about">Specialisms</a></li>
                                <li><a href="#feature1">Contextual</a></li>
                                <li><a href="#feature2">Portfolio</a></li>
                                <li><a href="#how-it-works">Media</a></li>
                                <li><a href="#team">Team</a></li>
                                <li class="phone-call"><a href="callto:+44 12345678">Phone  </a>/<a href="mailto:email">   Email</a></li>
                            </ul>
                        </nav><!-- /#main-menu -->
                    </div>
                </div>
            </div><!-- /.container -->
            <div class="back-to-top">
                <!-- Back to top button -->
                <a href="#wrapper"><img src="assets/images/arrow-top.png" alt="Back to Top" title="Back to Top" /></a>
            </div>
        </header><!-- /#header -->

I am using a number of media queries for different resolutions (will paste one example below) 我正在针对不同的分辨率使用多种media queries （将在下面粘贴一个示例）

@media screen and max-width1200px {
    div.site-logo {
        max-width:70%;
    }

    img.logoimage {
        max-width:1%;
    }
}

Now as my understanding goes, this should set the total space allowed for the div that the image is in to 70% of the total width of the page, and then my image should be allowed just a max-width of 1% (this is so small because I just wanted to test that it was working). 现在，按照我的理解，这应该将图像所在的div的总空间设置为页面总宽度的70% ，然后我的图像的max-width为1% （这是这么小，因为我只是想测试它是否正常工作。 The image however still extends well off of the edge of the page on my iPhone. 但是，该图像仍然远远超出了iPhone上页面的边缘。

How else can an image be scaled to fit a mobile screen correctly? 还可以如何缩放图像以正确适合移动屏幕？

Answer 1

This should be : 应该是：

    @media screen and (max-width:1200px) {
        div.site-logo {
            max-width:70%;
        }

        img.logoimage {
            max-width:1%;
        }
    }

Answer 2

try 尝试

@media screen and (max-width:1199px) {
    .logoimage {
        width:1%;
    }
}

@media screen and (min-width:1200px) {
    .logoimage {
        width:70%;
    }
}

图片不会使用媒体查询来调整大小

问题描述

2 个解决方案

解决方案1
3 已采纳 2014-08-22 09:34:51

解决方案2
0 2019-04-23 05:07:57

图片不会使用媒体查询来调整大小

问题描述

2 个解决方案

解决方案1 3 已采纳 2014-08-22 09:34:51

解决方案2 0 2019-04-23 05:07:57

解决方案1
3 已采纳 2014-08-22 09:34:51

解决方案2
0 2019-04-23 05:07:57