Kev*_*son 43 html css image twitter-bootstrap twitter-bootstrap-3
在Firefox(在Win7和Win8上测试)中,使用下面的代码 - 当响应图像在内部时,<fieldset>它不再响应.这意味着当我的表单为手机调整大小时,图像不会相应缩小.
我可以轻松地"解决"这个问题,所以我不需要任何帮助.但是,如果您知道解决此问题的方法,我们将不胜感激.
下面的代码中的响应图像将不会响应FireFox中的浏览器大小(至少在Win7和Win8上),除非您删除<fieldset>和<legend>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fieldset Responsive Image Test</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
</head>
<body>
<div id='content' class='container'>
<div class='row'>
<div class='col-xs-10 col-xs-offset-1'>
<form>
<fieldset>
<legend>I Am Legend</legend>
<img class='img-responsive' src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzY2NiIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNDQ0O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+U2Vjb25kIHNsaWRlPC90ZXh0Pjwvc3ZnPg==" alt="img" />
</fieldset>
</form>
</div>
</div>
</div>
</body>
</html>
zes*_*ssx 52
这看起来像一个Bootstrap问题 ......
目前,这是一种解决方法:添加.col-xs-12到您的响应式图像.
Kev*_*son 45
您需要的只是width:100%适用于标签的地方,如此处的各种答案所示.
使用col-xs-12:
<!-- adds float:left, which is usually not a problem -->
<img class='img-responsive col-xs-12' />
或者内联CSS:
<img class='img-responsive' style='width:100%;' />
或者,在您自己的CSS文件中,为.img-responsive添加其他定义
.img-responsive {
width:100%;
}
问题的根源
这是一个已知的FF错误,<fieldset>它不遵守溢出规则:
https://bugzilla.mozilla.org/show_bug.cgi?id=261037
用于修复FireFox错误的CSS"FIX"将成为<fieldset> display:table-column.但是,根据以下链接,这样做会导致在Opera中显示字段集失败:
https://github.com/TryGhost/Ghost/issues/789
因此,只需将您的标记设置为100%宽度,如上述解决方案之一所述.
Rya*_*len 11
将bootstrap.css中的.img-responsive更改为以下内容:
.img-responsive {
display: block;
max-width: 100%;
width: 100%;
height: auto;
}
由于某种原因,添加宽度:100%混合使img响应工作.