1
我剛開始使用bootstrap，並且在調整瀏覽器大小時出現圖像偏移的問題。保存我的圖像和文字的背景圖像似乎也不會縮放。當我最大化我的瀏覽器時，一切都很到位和完美。正如你可以在第一張圖片中看到的，這是我的問題所在。第二個圖像是它看起來最大化的方式，以及它在所有屏幕尺寸下的外觀。任何幫助感謝！Bootstrap - 在調整瀏覽器大小時圖像不斷移動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
rel="stylesheet">
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"
rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
<link href="images/theater.ico" rel="shortcut icon" type="image/x-icon">
</head>
<body>
<div class="container">
<header>
<div id="rainbow"><img alt="rainbow gradient" src=
"images/rainbow.png"></div>
<div id="header">
<!--home-->
<p id="logo"><img alt="Bethan Rainforth a comedic dancer" src=
"images/logo.png" class="img-responsive"></p>
</div>
<div id="nav-bar">
<nav class="nav">
<ul class="list-inline">
<li>
<a href="index.html" id="home">Home</a>
</li>
<li>
<a class="gray" href="work.html">Work</a>
</li>
<li>
<a class="gray" href="gallery.html">Gallery</a>
</li>
<li>
<a class="gray" href="hireme.html">Hire!</a>
</li>
</ul>
</nav>
</div>
</header>
<div class="row">
<div class="about-me row">
<div class="col-md-12">
<img alt="Bethan Rainforth" class="img-responsive" id="pic" src=
"images/pic.png">
<p class="about-text">I am a physical comedian, continuously
being inspired by comical characters and exaggerated
movement. I fuse elements of dance and theatre to create
performances that are somewhat over-the-top, and
outrageous. I use locking technique as a foundation build
and produce uproarious performances suitable for an
eclectic audience. I aim to leave audience members feeling
uplifted, swimming in their own tears of laughter,
momentarily forgetting any worries or woes.</p>
</div><!--End of col-md-12 about me-->
</div><!--End of about me row-->
</div><!--End of about me wrapper-->
/********************************
Body of page
*********************************/
html,
body {
background-image: url(images/background.png);
margin: 0 auto;
}
#container{
width: 960px;
margin: 0 auto;
}
/********************************
Header
*********************************/
#rainbow img{
margin-bottom: 15px;
}
#logo img {
width: 320px;
}
/********************************
Navigation
*********************************/
nav a {
font-family: Hobo Std;
padding: 50px;
}
ul {
list-style-type: none;
}
nav {
text-align: center;
margin-left: 20px;
}
a {
text-decoration: none;
}
nav li {
display: inline;
width: 150px;
}
.gray,
a:hover,
a:visited,
a:active {
color: #a5a5a5;
text-decoration: none;
}
#home {
background-image: url(images/pinkpaint.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 30px;
margin: 0 auto;
color: #000;
}
ul.list-inline{
margin-top: 25px;
}
/********************************
About Me
*********************************/
img#pic {
width: 260px;
float: left;
margin-left: 54px;
margin-top: 74px;
}
.about-me {
background-image: url(images/border.png);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center center;
width: 730px;
height: 490px;
display: block;
margin: 0 auto;
}
p.about-text{
color: #7ca5d2;
font-family: hobo std;
font-size: 1.2em;
line-height: 35px;
margin: 75px;
}
用於本css img {vertical-align：top;} –
似乎不起作用。同樣的問題:( – gwerd