窗口宽度扩大时如何使图片可展宽
窗口宽度扩大时如何使图片可展宽
提问于 2015-06-01 05:35:00
我想使"img/rsz_indexpage_image.jpg“图片根据div大小variation.when可伸缩，扩大div图片的宽度不像expected.how那样通过引导来实现。现在放大时图像大小是静态的。
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/loginjs.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/logincss.css">
</head>
<body>
<div class="container">
<div class="row vertical-offset-100">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-default">
<div class="panel-heading">
<div class="row-fluid user-row">
<img src="img/rsz_indexpage_image.jpg" class="img-responsive" alt="Conxole Admin"/>
</div>
</div>
<div class="panel-body">
<form accept-charset="UTF-8" role="form" class="form-signin">
<fieldset>
<label class="panel-login">
<div class="login_result"></div>
</label>
<input class="form-control" placeholder="Username" id="username" type="text">
<input class="form-control" placeholder="Password" id="password" type="password">
<br></br>
<input class="btn btn-lg btn-success btn-block" type="submit" id="login" value="Login »">
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>回答 2
Stack Overflow用户
回答已采纳
发布于 2015-06-01 05:42:17
如果你想保持高宽比，那么放宽:100%，高度:自动
如果要覆盖整个父元素，则高度:100%，宽度:100%。
你该怎么把它和..img反应
.img-responsive {
display: block;
width: 100%;
height: auto;
margin: auto;
} Stack Overflow用户
发布于 2015-06-01 05:42:17
window.onresize = function(event) {
updateImageSize()
};
function updateImageSize() {
$(".img-responsive").each(function(){
var ratio_cont = jQuery(this).width()/jQuery(this).height();
var $img = jQuery(this).find("img");
var ratio_img = $img.width()/$img.height();
if (ratio_cont > ratio_img)
{
$img.css({"width": "100%", "height": "auto"});
}
else if (ratio_cont < ratio_img)
{
$img.css({"width": "auto", "height": "100%"});
}
});
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30566239
复制相关文章
相似问题
腾讯云开发者
