我问了类似的问题，但这次我会尝试让我的问题更具体一些。
我创建了一个有3种模式的网站：
一个更大的分辨率 - http://puu.sh/dBaeI/d5cdce3056.jpg
一个用于平板电脑的分辨率 - http://i.imgur.com/n4UGT4H.jpg
一个用于移动设备分辨率 - http://i.imgur.com/L5Gv6u8.jpg
如你所见，我的图像是＆lt;“figure”＆gt;但我似乎无法在媒体查询中访问和编辑它们如何解决这个问题？
一个人物会自动创建某种滚动的东西（我突出显示），这样你在滚动时仍然可以看到整个画面，我怎样才能使我的图像和图形响应？
使用我的移动分辨率，我的导航会像我的图像一样重叠页面的其他部分，所以图中我该如何解决？
预览和代码：http://www.cssdesk.com/8ZpXX（由于图片原因，您无法在预览中看到我的意思）
答案 0 :(得分：1)
一种选择是使用媒体查询和变换缩小图像，例如：
@media only screen and (max-width: 450px) {
#imageDiv {
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
-webkit-transform: scale(0.7);
transform: scale(0.7);
}
jsFiddle here - 您可以在html / css / js / output窗格之间拖动拆分器，以查看3量子的大小调整。
Re：缩放图像会导致图像失去居中效果 - 您可以通过更多变换将图像移回中心，例如：
-moz-transform-origin: left center;
-ms--origin: left center;
-webkit-transform-origin: left center;
transform-origin: left center;
答案 1 :(得分：0)
<强> HTML
<!DOCTYPE html>
<html>
<head>
<title>The Fray Fan Web Site</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="wrapper">
<header>
<h1>Fan Web Site The Fray</h1>
<nav>
<ul>
<li><a href="index.html"class="current">Home</a></li>
<li><a href="bio.html">Biography</a></li>
<li><a href="about.html">About</a></li>
</li>
<li><a href="news.html">News</a>
</li>
<li><a href="releases.html">Releases</a>
<ul>
<li><a href="albums.html">Albums</a></li>
<li><a href="singles.html">Singles</a></li>
</li>
</ul>
</nav>
</header>
<section class="border">
<article>
<figure>
<img src="images/100468-fray_617_409.jpg" id="normalimg" alt="The Fray" />
<figcaption>The Fray</figcaption>
</figure>
<hgroup>
<h2> H2 Title Lorem ipsum dolor sit amet</h2>
<h3> H3 Lorem ipsum dolor sit amet</h3>
</hgroup>
<p>Paragraph Lorem ipsum dolor sit amet</p>
</article>
<article>
<figure>
<img src="images/The Fray.png" alt="The Fray" />
<figcaption>The Fray</figcaption>
</figure>
<hgroup>
<h2> H2 Title Lorem ipsum dolor sit amet</h2>
<h3> H3 Lorem ipsum dolor sit amet</h3>
</hgroup>
<p>Paragraph Lorem ipsum dolor sit amet</p>
</article>
</section>
<aside>
<section class="popular-songs">
<h2>Top 5 Songs</h2>
<a href="http://open.spotify.com/track/5fVZC9GiM4e8vu99W0Xf6J">1. How to Save a Life</a>
<a href="http://open.spotify.com/track/4IoYz8XqqdowINzfRrFnhi">2. You Found Me</a>
<a href="http://open.spotify.com/track/57uX2vR9j9DNiANDYfXw1i">3. Never Say Never</a>
<a href="http://open.spotify.com/track/1N62wozuHCvczCkY4QidpP">4. Over My Head(Cable Car)</a>
<a href="http://open.spotify.com/track/6IDDwI0YOCAUDhMZltQekS">5. Love don't die</a>
</section>
<section class="contact-details">
<h2>Contact</h2>
<p>Raar<br />
CSS<br />
Nog meer onzin<br />
Onzin</p>
</section>
<section class="Shit">
<h2>News</h2>
<p>Raar<br />
CSS<br />
Nog meer onzin<br />
Onzin</p>
</section>
</aside>
<footer>
© Maker
<a href="https://www.facebook.com/TheFray" target="_blank" align="right"><img id="imgfooter" src="http://www.niftybuttons.com/webicons2/facebook.png" border="0" style="margin:1px;"></a>
<a href="https://twitter.com/thefray" target="_blank" align="right"><img id="imgfooter" src="http://www.niftybuttons.com/webicons2/twitter.png" border="0" style="margin:1px;"></a>
</footer>
</div><!-- .wrapper -->
</body>
的 CSS
body {
color: #666666;
background-color: #1f4643;
background-image: url("images/Greenpower.png");
background-position: center;
font-family: "Cuprum", Arial;
line-height: 1.4em;
margin: 0px;
text-align: auto;
}
.wrapper {
width: 940px;
margin: 20px auto 20px auto;
/*border: 1px solid #000000;*/
background-color: #ffffff;
}
header {
height: 160px;
background-image: url(images/header3.png);
background-repeat: no-repeat;
}
h1 {
text-indent: -9999px;
width: 940px;
height: 130px;
margin: 0px;
}
footer {
clear: both;
color: #ffffff;
background-color: #1f4643;
height: 30px;
}
nav {
clear: both;
color: #ffffff;
background-color: #ffffff;
height: 30px;
}
/*(OLD BODY) body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 20px 50px 150px;
font-size: 13px;
text-align: center;
}
*/
ul {
text-align: center;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
width: 147px;
}
ul li:hover {
background: #efefef;
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
ul li ul li {
background: #ffffff;
display: block;
color: #fff;
border: 1px solid #eeeeee;
}
ul li ul li:hover, ul li .current { background: #efefef; }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
section.border {
float: left;
width: 659px;
border-right: 1px solid #eeeeee;
}
article {
clear: both;
overflow: auto;
width: 100%;
}
hgroup {
margin-top: 40px;
}
figure {
float: left;
width: auto;
height: auto;
padding: 5px;
margin: 20px;
border: 1px solid #eeeeee;
}
#bio1 {
float: left;
width: auto;
height: auto;
padding: 5px;
margin: 20px;
border: 1px solid #eeeeee;
}
#bio2 {
float: left;
width: auto;
height: auto;
padding: 5px;
margin: 20px;
border: 1px solid #eeeeee;
}
#bio3 {
float: left;
width: auto;
height: auto;
padding: 5px;
margin: 20px;
border: 1px solid #eeeeee;
}
#bio4 {
float: left;
width: auto;
height: auto;
padding: 5px;
margin: 20px;
border: 1px solid #eeeeee;
}
#imgfooter {
float: right;
}
figcaption {
font-size: 90%;
text-align: left;
}
aside {
width: 230px;
float: left;
padding: 0px 0px 0px 20px;
}
aside section a {
display: block;
padding: 10px;
border-bottom: 1px solid #eeeeee;
}
aside section a:hover {
color: #985d6a;
background-color: #efefef;
}
a {
color: #02536f;
text-decoration: none;
}
h1, h2, h3 {
font-weight: normal;
}
h2 {
margin: 10px 0px 5px 0px;
padding: 10px;
}
h3 {
margin: 0px 0px 10px 0px;
padding: 5px;
color: ##02536f
}
aside h2 {
padding: 30px 0px 10px 0px;
color: #02536f;
}
footer {
font-size: 80%;
padding: 7px 0px 0px 20px;
height: 50px;
}
p {
padding: 5px;
}
@font-face {
font-family: "Cuprum";
src: url('349121094-Cuprum-Regular.eot');
src: url('349121094-Cuprum-Regular.eot?#iefix') format('embedded-opentype'),
url('349121094-Cuprum-Regular.svg#Cuprum') format('svg'),
url('349121094-Cuprum-Regular.woff') format('woff'),
url('349121094-Cuprum-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@media screen and (max-width: 939px) {
.wrapper {
width: 100%;
max-width: 600px;
}
img #normalimg {
}
figure {
}
img #imgfooter {
width: 100%;
}
section.border {
width: 85%;
}
ul li {
width: 78px;
}
}
@media screen and (max-width: 600px) {
.wrapper {
width: 100%;
max-width: 340px;
}
img #normalimg {
width: 50%;
}
img #imgfooter {
width: 100%;
}
ul li {
width: 95px;
}
section.border {
}
figure {
}
ul li {
font: bold 12px/18px sans-serif;
display: block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
width: 300px;
}
}
@media only screen and (max-width: 600px) {
#normalimg {
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
-webkit-transform: scale(0.7);
transform: scale(0.7);
}
答案 2 :(得分：0)
在媒体查询上 @media screen和（max-width：600px）{
为什么你从未为图赋值。
像 @media screen和（max-width：600px）{
figure {
width: auto;
height: auto;
}