调整窗口大小时，页面上的四个图像将不会调整大小
Four images on the page will not resize when the window is resized
当窗口重新调整大小时，我正试图让类幻灯片中的四个图像重新调整大小。目前，当窗口变小时，图像会滑过，但它们永远不会变小。我认为这是一个引导程序问题，特别是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,
});
});
对于图像，请使用百分比。这样，当你调整页面大小时，图像会随之调整大小，以匹配你输入的百分比
例如：
<img style="width:25%" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
上面的行为将与宽度以px为单位时不同。
小型jsbin示例
将css中的img标记的max-width设置为100%。随着浏览器重新调整大小，您的所有网站图像都将重新调整大小。此外，请以百分比形式给出您的width属性。
img {
max-width: 100%;
}
.header-img {
width: 67%;
}
谢谢，
您可以尝试使用"vh"而不是o"px"（在说明图像大小时）。我相信，这样一来，图像的大小就会根据它要显示的窗口的大小而变化。
你可以在这里阅读关于vh和vw的信息：http://snook.ca/archives/html_and_css/vm-vh-units
要使用它，你只需要把它放在img标记中，或者放在一个会影响img的css样式表中，如示例所示：https://i.stack.imgur.com/5aqzV.png
Bootstrap 3中的图像可以通过添加.img-responsive类来实现友好响应。这将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标签。
相关文章：
- Angular:如何使用ng选项进行四个单独的选择
- 有人知道如何使用highchart API实现三个或四个级别的动态下拉图吗
- 获取两个输入元素的值，并检查第三个元素的值.将值设置为第四个元素
- 如何在图像上添加标签.在jquerymobile中图像的四个角落
- 如何在javascript中生成任意四个数字之间的随机数
- 根据下拉选择隐藏四个输入框
- 调整窗口大小时，页面上的四个图像将不会调整大小
- 在同一网页上调整多个svg图的大小
- 如何将制表符替换为四个空格 jQuery
- 如何使图形上最近的四个点发光
- Angularjs:显示字符串中的最后四个字符，并将其余字符替换为“X”
- 从四个输入字段中查找总计或平均值，并在另一个输入字段中显示值
- 如何将字符串修剪到最后四个字符
- 包括四个.js文件，但只加载了一个??为什么
- 插入四个空格而不是制表符
- 使用正则表达式替换除最后四个数字之外的所有数字
- 使用 javascript 调整多个图像的大小
- 删除第四个空格之后的字符串的所有字符
- 如何使用 jquery 选择器获取第三个或第四个元素并设置其 id
- 以统一大小调整多个图像的大小并保持比例
