Question

我试图在窗口重新调整大小时让类幻灯片中找到的四个图像重新调整大小。目前，当窗口变小但是它们永远不会变小时，图像会滑过。我相信这是一个特别是col-sm-3和行类的引导问题。您可以在https://github.com/mcontado/madison

找到并分叉我的代码

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>Eleven Madison Park Resturant</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script src="http://malsup.github.io/min/jquery.cycle.all.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="shortcut icon" href="https://media-cdn.getbento.com/accounts/102da05919be0726cec2e6365172199c/media/accounts/media/hf1OSSqmQByRUTiQbhxg_favicon.ico" type="image/x-icon"><!-- this adds the favicon -->
    <script type="text/javascript" src="js/form.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link type="text/css" rel="stylesheet" href="css/style.css"/>
</head>

<body>
    <div class="shell container-fluid clearfix">
        <header class="site-header pull-right" role="banner">
            <a href="http://www.elevenmadisonpark.com/">
                <img src="photo/logo_top.png">
            </a>
        </header>

        <section class="wrapper">
                <div class="row hidden-xs">
                    <div class="slide slider1 col-xs-3">
                        <img id="01" src="photo/0a.jpe">
                        <img id="02" src="photo/1a.jpe">
                        <img id="03" src="photo/2a.jpe">
                        <img id="04" src="photo/3a.jpe">
                    </div>

                    <div class="slide slider2 col-xs-3">
                        <img id="11" src="photo/0b.jpe">
                        <img id="12" src="photo/1b.jpe">
                        <img id="13" src="photo/2b.jpe">
                        <img id="14" src="photo/3b.jpe">
                    </div>

                    <div class="slide slider3 col-xs-3">
                        <img id="21" src="photo/0c.jpe">
                        <img id="22" src="photo/1c.jpe">
                        <img id="23" src="photo/2c.jpe">
                        <img id="24" src="photo/3c.jpe">
                    </div>

                    <div class="slide slider4 col-xs-3">
                        <img id="31" src="photo/0d.jpe">
                        <img id="32" src="photo/1d.jpe">
                        <img id="33" src="photo/2d.jpe">
                        <img id="34" src="photo/3d.jpe">
                    </div>
                </div>
        </section>
                <div class="navigation">
                    <nav>
                        <ul class="nav-stacked">
                            <li>
                                <a href="">MENUS</a>
                            </li>
                            <li>
                                <a href="">RESERVATIONS</a>
                            </li>
                            <li>
                                <a href="">PEOPLE</a>
                            </li>
                            <li>
                                <a href="">ACCOLADES</a>
                            </li>
                            <li>
                                <a href="">PRIVATE DINING</a>
                            </li>
                            <li>
                                <a href="">COOKBOOKS</a>
                            </li>
                            <li>
                                <a href="">COLLABORATIONS</a>
                            </li>
                            <li>
                                <a href="">CONTACT</a>
                            </li>
                        </ul>
                    </nav>
                    <div class="bottom-logo hidden-xs">
                        <a href="http://www.relaischateaux.com/" target="blank">
                            <img src="http://assets-cdn.getbento.com/assets/elevenmadisonpark/!362b28668884299914b932bd37a50b983c5e7c90ae93b!/img/logo_relais.png" class="something" alt="Relais & Chateaux">
                        </a>
                    </div>
                </div>

        <!-- </section> -->


        <footer class="visible-xs">
            <p>
                11 Madison Ave, New York, New York 10010
                <br>
                212.889.0905 
                <a href="mailto:info@elevinmadisonpark.com">info@elevenmadisonpark.com</a>
            </p>    
        </footer>

    </div>
</body>

这是CSS

body {
background-color: #1d1d1d;
font-family: "Helvetica Neue", helvetica, arial, sans-serif;
}

header img {
float: right;
margin: 20px 16px 26px 0;
}

.shell {
margin: 0 auto;
/*position: relative;*/
/*text-align: left;*/
width: 963px; /*this fixed pic spacing*/
}

   .wrapper {
clear: both;
}

.slide {
float: left;
height: 335px;
margin-right: 1px;
overflow: hidden;
position: relative;
width: 240px;
}

.slider4 {
margin-right: 0;
}

a {
color: gray;
text-decoration: none;
}

a:hover {
color: white;
text-decoration: none;
}

ul {
list-style: none;
font-size: 1.5em;
}

li {
margin-bottom: -0.2em;
}

a img {
float: right;
}

.container-fluid {
padding-left: 0;
padding-right: 0;
}

.navigation {
clear: both;
}

footer {
clear: both;
margin-left: 3em;
}

p {
font-size: 1.5em;
line-height: 1.6em;
color: #b5b5b5;
}

nav {
float: left;
}

.row {
margin: 0 auto;
}

这是javaScript

$(document).ready(function(){

$(".slide > img").fadeOut(0);

$('.slider2, .slider4').cycle({
      timeout: 8000,
    });

$('.slider1, .slider3').cycle({
        delay: 2000,
        timeout: 8000,
      });
});

Answer 1

您可以尝试使用“vh”而不是“px”（当说明图像的大小时）。这样，图像会根据显示的窗口大小改变大小，我相信。

您可以在此处阅读vh和vw：http://snook.ca/archives/html_and_css/vm-vh-units

要使用它，你只需要将它放在img标签中，或者放在可能影响img的css样式表中，如示例中所示：http://i.imgur.com/qE9vxER.png

Answer 2

对于图像，请使用百分比。这样，当你调整页面大小时，图像会随之调整大小以匹配你输入的百分比。

例如：

<img style="width:25%" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">

上述行为与宽度为px时的行为不同。

小jsbin example

Answer 3

为您的css中的max-width标记设置img为100％。当浏览器重新调整大小时，您的所有网站图片都会重新调整大小。另外，以百分比形式提供width个属性。

img {
    max-width: 100%;
}

.header-img {
    width: 67%;
}

谢谢，

Answer 4

通过添加.img-responsive类，可以使Bootstrap 3中的图像响应友好。这会将max-width: 100%;, height: auto;和display: block;应用于图像，以便它可以很好地缩放到父元素。

<img src="..." class="img-responsive" alt="Responsive image">

因此，请将此类添加到所有图像中，以使其具有响应性。

<img id="01" class="img-responsive" src="photo/0a.jpe">等等...到你所有的img标签。

调整窗口大小时，页面上的四个图像不会调整大小

4 个答案: