在尝试制作我所制作的网站的移动版本时，我遇到了移动设备的图像大小调整问题。有没有一种方法可靠地使图像流畅到浏览器的大小？我当前的图像会导致屏幕右侧有额外的空间（仅包含图像的其余部分）。
我尝试过宽度：100％ 最大宽度：100％
并且似乎都没有起作用（虽然我在查看类似问题时似乎是解决方案） - 有谁能告诉我我做错了什么？
编辑：有人只提出了相关代码的请求 - 我不确定这实际上是不是问题，但我认为是这样：
HTML：
<div id="images">
<img src="images/cristina.png" alt="Cristina Lord">
</div>
CSS：
@media only screen and (max-width: 640px) {
body{text-align: center;}
div#content{text-align: center;}
div#eventtext{text-align: center;
padding-left: 13.2%}
div#line{width: 100%;}
div#center{
padding-left: 0%;
}
div#images{
max-width: 100%;
height: auto;
}
}
其余的仍在这里，供参考。 HTML：
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cristina Lord</title>
<link href="css/styles.css" media="screen" rel="stylesheet" type="text/css" />
<body>
<div id="wrapper">
<div id="header">
<div id="site_title1">
Cristina Lord
</div>
<div id="site_title2">
Composer, Pianist
</div>
</div>
<div id="content">
<div id="menu">
<ul>
<li><a href="about.html">About</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="music.html">Music</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="images">
<img src="images/cristina.png" alt="Cristina Lord">
</div>
<div id="about">
<p>Cristina is currently a senior at the University of California, Santa Barbara, where she is completing her B.A. degree in Music Composition at the College of Creative Studies. She will be pursuing her masters at Cal State Long Beach in the fall. While at UCSB, she has studied composition under William Kraft, Dr. Leslie Hogan, and Dr. Jeremy Haladyna, piano with Dr. Charles Asche, and conducting with Christopher Rountree.</p>
<br>
<p>Cristina has worked as a piano teacher for the Santa Barbara School of Music for the past three years. She also regularly sings for the English Broadside Ballad Archive at UCSB, and is a member of the contemporary choral ensemble New Century Voices.</p>
<br>
<p>Last year (2013), Cristina won a Corwin Award in the vocal category for her song cycle, Songs of American Women, which will be performed this year by the Ensemble for Contemporary Music and at the Primavera Festival at UCSB.</p>
</div>
</div>
<div id="footer">
<footer>
<p>Copyright Cristina Lord 2014 ©</p>
<a href="http://www.facebook.com/cristina.lord"><img src="images/facebooklogo.png" height="40" width="40" alt="Facebook"></a>
<a href="http://www.soundcloud.com/cristina_lord"><img src="images/soundcloudlogo.png" height="40" width="76" alt="SoundCloud"></a>
</footer>
</div>
</div>
CSS：
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* main font style, background color, and body margins */
body{
background-color: rgb(255,255,240);
color:black;
font-family: "Calibri", "Candara", "Segoe", "Segoe UI", "Optima", "Arial", sans-serif;
xpadding: 45px 100px 0px 100px;
padding: 45px 7.8125% 0% 7.8125%;
text-align: left;
line-height: 20px;
}
/* main header style */
div#site_title1
{
color:rgb(188,143,143);
font-size: 28px;
padding-bottom: 5px;
}
div#site_title2
{
color:rgb(188,143,143);
font-size: 20px;
padding-bottom: 5px;
}
/*menu style*/
div#menu ul a
{
color:black;
font-size: 18px;
padding-bottom: 10px;
text-decoration: none;
transition: color 0.5s ease;
border-color: rgb(255,255,240);
}
div#menu li
{ display: inline;
}
div#menu ul a:hover
{
color:rgb(188,143,143);
border-bottom: 2px solid #BC8F8F;
transition: border-color 0.5s ease;
}
div#menu
{word-spacing:5px;}
#menu, #menu a {
padding:10px 10px 20px 10px;
}
div#menu li.selected a { color:rgb(188,143,143);border-bottom: 2px solid #BC8F8F;}
/* about and image positioning */
div#about
{
max-width:500px;
font-size: 16px;
-webkit-animation: fadein 0.5s; /* Safari and Chrome */
-moz-animation: fadein 0.5s; /* Firefox */
-ms-animation: fadein 0.5s; /* Internet Explorer */
-o-animation: fadein 0.5s; /* Opera */
animation: fadein 0.5s;
}
div#images
{
float:right;
padding-right: 7.8125%;
padding-left: 15px;
padding-bottom: 15px;
-webkit-animation: fadein 0.5s; /* Safari and Chrome */
-moz-animation: fadein 0.5s; /* Firefox */
-ms-animation: fadein 0.5s; /* Internet Explorer */
-o-animation: fadein 0.5s; /* Opera */
animation: fadein 0.5s;
max-width: 100%;
}
/* event headers and text */
div#eventheader
{
color:rgb(188,143,143);
font-size: 18px;
font-weight: bold;
}
div#eventsubheader
{
color:#000;
font-size: 16px;
font-weight: bold;
}
div#eventtext
{
color:black;
font-size: 16px;
text-align: left;
max-width:400px;
}
/* table positioning/style */
th{
padding-bottom: 1%;
padding-top: 2%;
width:250px;
}
td{
padding:1%;
width:250px;
}
div#tablelist{
color:#000;
font-size: 14px;
text-align: left;
}
#tablelist, #tablelist a {
padding-left:20px;
padding-right: 20px;
padding-bottom: 20px;
xpadding-left:1.5625%;
xpadding-right: 1.5625%;
xpadding-bottom: 1.5625%;
}
table {
padding-left: 25px;
}
/* footer style */
html,
body {
height:100%;
margin:0;
}
#wrapper {
min-height:100%;
position: relative;
}
#content {
padding-bottom:70px;
overflow: auto;
}
#footer {
border-top: 2px solid rgb(188,143,143);
bottom:0;
height:70px;
left:0;
position:absolute;
text-align: center;
width:100%;
font-size: 12px;
}
body {
box-sizing: border-box;
}
/*fadein*/
div#contenttext{
-webkit-animation: fadein 0.5s; /* Safari and Chrome */
-moz-animation: fadein 0.5s; /* Firefox */
-ms-animation: fadein 0.5s; /* Internet Explorer */
-o-animation: fadein 0.5s; /* Opera */
animation: fadein 0.5s;
}
div#musiccontent{
-webkit-animation: fadein 0.5s; /* Safari and Chrome */
-moz-animation: fadein 0.5s; /* Firefox */
-ms-animation: fadein 0.5s; /* Internet Explorer */
-o-animation: fadein 0.5s; /* Opera */
animation: fadein 0.5s;
}
div#eventcontent{
-webkit-animation: fadein 0.5s; /* Safari and Chrome */
-moz-animation: fadein 0.5s; /* Firefox */
-ms-animation: fadein 0.5s; /* Internet Explorer */
-o-animation: fadein 0.5s; /* Opera */
animation: fadein 0.5s;
}
/* Firefox */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari and Chrome */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* misc. */
div#floatleft{
float:left;
}
div#floatright{
float: right;
}
a {text-decoration: none;
color:#000;
transition: color 0.5s ease;
}
a:hover {color:rgb(188,143,143);}
div#line{
width:33.3333%;
}
div#center{
padding-left:7.03125%;
}
/**media queries **/
@media only screen and (max-width: 640px) {
body{text-align: center;}
div#content{text-align: center;}
div#eventtext{text-align: center;
padding-left: 13.2%}
div#line{width: 100%;}
div#center{
padding-left: 0%;
}
div#images{
max-width: 100%;
height: auto;
}
}
如果您没有移动设备，它将在1280 X 800屏幕上以大约250-300％放大率开始出现问题。希望我能很好地解释这一点，感谢您阅读本文。