Html 更改屏幕尺寸时，带有超大屏幕的文本和图像会失真
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23267850/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Text and images with jumbotron get distorted when changing screen sizes
提问by
Today i have made a webpage using bootstrap 3, i have change the 'jumbroton' coding to make it look like this: http://www.bootply.com/103783
今天我使用 bootstrap 3 制作了一个网页，我更改了“jumbroton”编码以使其看起来像这样：http: //www.bootply.com/103783
Although the background image shows through, but when i resize it the page doesn't not resize but instead puts the text and image within the 'jumbotron' underneath something else.
虽然背景图像显示出来，但是当我调整它的大小时，页面不会调整大小，而是将文本和图像放在“jumbotron”中的其他东西下面。
I have tried putting a 'container' around the'jumbotron' with no luck... :(
我试过在 'jumbotron' 周围放一个'容器'，但没有运气...... :(
My website: http://warfacecommunity.bugs3.com/
我的网站：http: //warfacecommunity.bugs3.com/
Try scrolling in and you will see what i meant!
尝试滚动，你会明白我的意思！
CSS code in 'style.css'
'style.css' 中的 CSS 代码
.bg {
background: url('/img/BG.jpg') no-repeat center center !important;
position: fixed !important;
width: 100% !important;
height: 350px !important; /*same height as jumbotron */
top:0 !important;
left:0 !important;
z-index: -1 !important;
}
.jumbotron {
margin-bottom: 40px !important;
height: 350px !important;
color: white !important;
text-shadow: black 0.1em 0.3em 0.3em !important;
background:transparent !important;
HTML 'Jumbotron'
HTML“大屏幕”
<div class="jumbotron">
<img src="./img/the-blue-tick-md.png" alt=" " vspace="20" class="pull-right" class="img-responsive"/>
<h1>
Hello, world!
</h1>
<p>
This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
</p>
<p>
<a class="btn btn-primary btn-large" href="#">Learn more</a> <a class="btn btn-primary btn-large" href="#">Extras</a>
</p>
</div>
回答by Muhammad Ali Bala
You are very close,
你很亲近，
you should divide this in to two parts. and add the jumbotronwidth class for max-width to make it responsive
你应该把它分成两部分。并为 max-width 添加 jumbotronwidth 类以使其响应
<div class="jumbotron">
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 pull-right ">
<img vspace="20" class="jumbotronwidth" alt=" " src="./img/the-blue-tick-md.png">
</div>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<h1>
Hello, world!
</h1>
<p>
This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
</p>
<p>
<a class="btn btn-primary btn-large" href="#">Learn more</a> <a class="btn btn-primary btn-large" href="#">Extras</a>
</p>
</div></div>
css
css
.jumbotronwidth
{
max-width:100%;
}
