好的，所以我一直在重新开发我的网站，试图让它看起来更专业，我知道我用自己的在线资源自学的一切。我在路上撞了一下但是这是我的问题。 （如果它非常明显，请稍微锻造。我只有14岁，只用HTML和CSS编写了大约一年的时间。）
我的网站是我的LEGO定格动画视频（除了编码之外的其他爱好），我想要这样做，所以我的所有电影海报都像拼贴画一样。我成功地做到了这一点，但它在px中使用了精确的宽度和高度。 这是html
<body>
<!-- title div -->
<div id="head">
<img src=pic/title.png alt="title" class="M35F">
</div>
<!-- menu bar line -->
<div id="line" style="text-size: 2px;">
<img class='menu home' src=pic/home.png alt="Home" onclick="window.location='index.html';">
<img class="blank" src=pic/blank.png alt="b">
<img class='menu about' src=pic/about.jpg alt="About" onclick="window.location='About.html';">
<img class="blank" src=pic/blank.png alt="b">
<img class='menu comment' src=pic/comment.jpg alt="Comments" onclick="window.location='Comments.html';">
<img class="blank" src=pic/blank.png alt="b">
<img class='menu pic' src=pic/pic.png alt="Pictures" onclick="window.location='Pictures.html';">
<img class="blank" src=pic/blank.png alt="b">
<img class='menu active' src=pic/active.png alt="Activities" onclick="window.location='games.html';">
<img class="blank" src=pic/blank.png alt="b">
</div>
<!-- Explanation area -->
<br>
<br> my website is a collection of stop-motion animated videos.
<br>To learn more check out the About Page.
<br>Just click on the movie poster to go to that movies page where you can watch it.
<!-- main div section with the posters -->
<div style="margin-left:0%; margin-right:0%; width:100%; text-align:center;font-size: 25px">
<br>
<br>
<table class="table">
<!-- MKI6 and The Coffee Break -->
<tr>
<td>
<div class="posterEffect1">
<img class="bottom poster1" src=pic/blur/tcb.png alt="The Coffee Break" />
<img class="top poster1" src=pic/tcb.png alt="The Coffee Break" />
</div>
</td>
<td>
<div class="posterEffect1">
<img class="bottom poster1" src=pic/blur/MKI6.png alt="MKI6" />
<img class="top poster1" src=pic/MKI6.png alt="MKI6" />
</div>
</td>
</tr>
<!-- The Vehicle Show Race. The Prodigal Son-->
<tr>
<td style="font-size: 5px;">
<div class="posterEffect1">
<img class="bottom poster1" src=pic/blur/tvsr.png alt="The Vehicle Show Race">
<img class="top poster1" src=pic/tvsr.png alt="tvsr" />
</div>
</td>
<td style="font-size: 5px;" rowspan="2">
<div class="posterEffect">
<img class="bottom poster" src=pic/blur/TPSPoster.png alt="tps">
<img class="top poster" src=pic/TPSPoster.png alt="tps">
</div>
</td>
</tr>
<!-- Lt. James -->
<tr>
<td rowspan="2">
<div class="posterEffect">
<img class="bottom poster" src=pic/blur/lt.james.png alt="Lt. James">
<img class="top poster" src=pic/lt.james.png alt="Lt. James">
</div>
</td>
</tr>
<!-- The a-g attack -->
<tr>
<td>
<div class="posterEffect1">
<img class="bottom poster1" src=pic/blur/ag.jpg alt="The Air-to-Ground Attack">
<img class="top poster1" src=pic/ag.jpg alt="The Air-to-Ground Attack">
</div>
</td>
</tr>
<!-- The robbers race and the counterfeiters -->
<tr>
<td>
<div class="posterEffect">
<img class="bottom poster" src=pic/blur/TRR.jpg alt="The robbers race">
<img class="top poster" src=pic/TRR.jpg alt="The robbers race">
</div>
</td>
<td>
<div class="posterEffect">
<img class="bottom poster" src=pic/blur/tcp.jpg alt="The Counterfeiters">
<img class="top poster" src=pic/tcp.jpg alt="The Counterfeiters">
</div>
</td>
</tr>
<!-- The French plane -->
<tr>
<td>
<div class="posterEffect">
<img class="bottom poster" src=pic/blur/TFP.jpg alt="The French Plane">
<img class="top poster" src=pic/TFP.jpg alt="The French Plane">
</div>
</td>
<td>
<div class="posterEffect">
<img class="bottom poster" src=pic/blur/pic.jpg alt="pic">
<img class="top poster" src=pic.jpg alt="pic">
</div>
</td>
</tr>
</table>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<!-- footer credits -->
<div style="width:100%; text-align:center; font-size: 25px;">
<br>
<footer style="text-align:left; background-color:#FFFFFF; color:#888888; font-size: 25px">LEGO, the LEGO logo, and the Minifigure are trademarks and/or copyrights of the LEGO Group. I am not supported by LEGO or in any way is this website. Check out the LEGO website for more cool stuff. <a href="Link I can't post because I don't have enough Privilege">LEGO.com</a>
<br>
<br>
</footer>
</div>
这是CSS
/* makes sure that the website title is not to big */
.M35F {
width: 100%;
max-width: 905px;
margin-top: 20px;
margin-bottom: 20px;
}
/* makes sure the buttons are not to big */
.home {
width: 10.1%;
max-width: 107px;
}
.about {
width: 11.1%;
max-width: 117px;
}
.comment {
width: 16.7%;
max-width: 173px;
}
.pic {
width: 16.8%;
max-width: 174px;
}
.active {
width: 16.1%;
max-width: 167px;
}
.blank {
width: 1%;
max-width: 3px;
max-height: 25px;
margin-top: 10px;
margin-bottom: 10px;
}
/* makes the margin for the menu buttons */
.menu {
cursor: pointer;
margin-top: 10px;
margin-bottom: 10px;
-webkit-transition: -webkit-filter 0.5s; /* Safari */
-moz-transition: -webkit-filter 0.5s;
-ms-transition: -webkit-filter 0.5s;
-o-transition: -webkit-filter 0.5s;
transition: -webkit-filter 0.5s;;
}
.menu:hover {
cursor: pointer;
margin-top: 10px;
margin-bottom: 10px;
-webkit-filter: invert(1); /* Safari */
-moz-filter: invert(1);
-ms-filter: invert(1);
-o-filter: invert(1);
filter: invert(1);
}
/* makes sure links never get underlined */
a {
text-decoration:none;
}
/* makes the stuff for the tall posters */
.poster {
position: relative;
width: 100%;
border-radius: 15px;
max-width: 450px;
max-height: 601px;
}
.posterEffect {
position: relative;
width: 450px;
height: 601px;
}
.posterEffect img {
position:absolute;
left:0;
-webkit-transition: opacity 0.3s, transform 0.3s ease-in-out;
-moz-transition: opacity 0.3s, transform 0.3s ease-in-out;
-o-transition: opacity 0.3s, transform 0.3s ease-in-out;
transition: opacity 0.3s, transform 0.3s ease-in-out;
}
.posterEffect img.top:hover {
opacity:0;
}
.posterEffect:hover {
transform:scale(1.02,1.02);
}
/* makes the stuff for the wide posters */
.poster1 {
width: 100%;
border-radius: 15px;
max-width: 450px;
max-height: 260px;
}
.posterEffect1 {
position: relative;
width: 450px;
height: 260px;
}
.posterEffect1 img {
position:absolute;
left:0;
-webkit-transition: opacity 0.3s, transform 0.3s ease-in-out;
-moz-transition: opacity 0.3s, transform 0.3s ease-in-out;
-o-transition: opacity 0.3s, transform 0.3s ease-in-out;
transition: opacity 0.3s, transform 0.3s ease-in-out;
}
.posterEffect1 img.top:hover {
opacity:0;
}
.posterEffect1:hover {
transform:scale(1.02,1.02);
}
/* the main table holder for the posters */
.table {
width: 100%;
max-width: 900px;
border: 0px solid black;
text-align:center;
margin-left:auto;
margin-right:auto;
border-spacing: 4px;
}
/* sets the body properties */
body {
background-image:url('pic/lego.jpeg');
background-color: #ffd700;
text-align:center;
font-size: 25px;
}
/* the title attributes */
body{margin:0;padding:0}
#head {
background-image:url('pic/lego1.jpeg');
background-repeat:repeat;
width: 100%;
}
/*the menu line div attributes */
body{margin:0;padding:0}
#line {
background-image:url('pic/line.jpeg');
background-repeat:repeat;
width: 100%;
}
问题在于，如果你在移动设备上观看它，海报会溢出到屏幕的右侧而不会变小。 然后我尝试使用浏览器窗口使图像变小。我已经能够在使用百分比和最大宽度之前做到这一点，以确保它不会变得像这样大
.imgResizer {
width: 50%;
max-width: 350px; /*the images full width*/
}
但不管我用表格中的图片做了什么，我都可以让它正常工作。我已经使图像能够与窗口重新调整大小，但它们都是相互重叠的。 这是一张显示我的意思的图片。 Pictures overlaying each other
这是我的HTML
<body>
<!-- title div -->
<div id="head">
<img src=pic/title.png alt="title" class="M35F">
</div>
<!-- menu bar line -->
<div id="line" style="text-size: 2px;">
<img class='menu home' src=pic/home.png alt="Home" onclick="window.location='index.html';">
<img class="blank" src=pic/blank.png alt="b">
<img class='menu about' src=pic/about.jpg alt="About" onclick="window.location='About.html';">
<img class="blank" src=pic/blank.png alt="b">
<img class='menu comment' src=pic/comment.jpg alt="Comments" onclick="window.location='Comments.html';">
<img class="blank" src=pic/blank.png alt="b">
<img class='menu pic' src=pic/pic.png alt="Pictures" onclick="window.location='Pictures.html';">
<img class="blank" src=pic/blank.png alt="b">
<img class='menu active' src=pic/active.png alt="Activities" onclick="window.location='games.html';">
<img class="blank" src=pic/blank.png alt="b">
</div>
<!-- Explanation area -->
<br>
<br> is a collection of stop-motion animated videos.
<br>To learn more about check out the About Page.
<br>Just click on the movie poster to go to that movies page where you can watch it.
<!-- main div section with the posters -->
<div style="margin-left:0%; margin-right:0%; width:100%; text-align:center;font-size: 25px">
<br>
<br>
<table class="table">
<!-- MKI6 and The Coffee Break -->
<tr>
<td>
<div class="posterEffect1">
<img class="bottom poster1" src=pic/blur/tcb.png alt="The Coffee Break" />
<img class="top poster1" src=pic/tcb.png alt="The Coffee Break" />
</div>
</td>
<td>
<div class="posterEffect1">
<img class="bottom poster1" src=pic/blur/MKI6.png alt="MKI6" />
<img class="top poster1" src=pic/MKI6.png alt="MKI6" />
</div>
</td>
</tr>
<!-- The Vehicle Show Race. The Prodigal Son-->
<tr>
<td style="font-size: 5px;">
<div class="posterEffect1">
<img class="bottom poster1" src=pic/blur/tvsr.png alt="The Vehicle Show Race">
<img class="top poster1" src=pic/tvsr.png alt="tvsr" />
</div>
</td>
<td style="font-size: 5px;" rowspan="2">
<div class="posterEffect">
<img class="bottom poster" src=pic/blur/TPSPoster.png alt="tps">
<img class="top poster" src=pic/TPSPoster.png alt="tps">
</div>
</td>
</tr>
<!-- Lt. James -->
<tr>
<td rowspan="2">
<div class="posterEffect">
<img class="bottom poster" src=pic/blur/lt.james.png alt="Lt. James">
<img class="top poster" src=pic/lt.james.png alt="Lt. James">
</div>
</td>
</tr>
<!-- The a-g attack -->
<tr>
<td>
<div class="posterEffect1">
<img class="bottom poster1" src=pic/blur/ag.jpg alt="The Air-to-Ground Attack">
<img class="top poster1" src=pic/ag.jpg alt="The Air-to-Ground Attack">
</div>
</td>
</tr>
<!-- The robbers race and the counterfeiters -->
<tr>
<td>
<div class="posterEffect">
<img class="bottom poster" src=pic/blur/TRR.jpg alt="The robbers race">
<img class="top poster" src=pic/TRR.jpg alt="The robbers race">
</div>
</td>
<td>
<div class="posterEffect">
<img class="bottom poster" src=pic/blur/tcp.jpg alt="The Counterfeiters">
<img class="top poster" src=pic/tcp.jpg alt="The Counterfeiters">
</div>
</td>
</tr>
<!-- The French plane -->
<tr>
<td>
<div class="posterEffect">
<img class="bottom poster" src=pic/blur/TFP.jpg alt="The French Plane">
<img class="top poster" src=pic/TFP.jpg alt="The French Plane">
</div>
</td>
<td>
<div class="posterEffect">
<img class="bottom poster" src=pic/blurs.jpg alt="pic">
<img class="top poster" src=pic/clear.jpg alt="pic">
</div>
</td>
</tr>
</table>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<!-- footer credits -->
<div style="width:100%; text-align:center; font-size: 25px;">
<br>
<footer style="text-align:left; background-color:#FFFFFF; color:#888888; font-size: 25px">LEGO, the LEGO logo, and the Minifigure are trademarks and/or copyrights of the LEGO Group. I am not supported by LEGO or in any way is this website. Check out the LEGO website for more cool stuff. <a href="link that I can't post because I don't have enough reputaion">LEGO.com</a>
<br>
<br>
</footer>
</div>
而我的CSS
/* makes sure that the website title is not to big */
.M35F {
width: 100%;
max-width: 905px;
margin-top: 20px;
margin-bottom: 20px;
}
/* makes sure the buttons are not to big */
.home {
width: 10.1%;
max-width: 107px;
}
.about {
width: 11.1%;
max-width: 117px;
}
.comment {
width: 16.7%;
max-width: 173px;
}
.pic {
width: 16.8%;
max-width: 174px;
}
.active {
width: 16.1%;
max-width: 167px;
}
.blank {
width: 1%;
max-width: 3px;
max-height: 25px;
margin-top: 10px;
margin-bottom: 10px;
}
/* makes the margin for the menu buttons */
.menu {
cursor: pointer;
margin-top: 10px;
margin-bottom: 10px;
-webkit-transition: -webkit-filter 0.5s; /* Safari */
-moz-transition: -webkit-filter 0.5s;
-ms-transition: -webkit-filter 0.5s;
-o-transition: -webkit-filter 0.5s;
transition: -webkit-filter 0.5s;;
}
.menu:hover {
cursor: pointer;
margin-top: 10px;
margin-bottom: 10px;
-webkit-filter: invert(1); /* Safari */
-moz-filter: invert(1);
-ms-filter: invert(1);
-o-filter: invert(1);
filter: invert(1);
}
/* makes sure links never get underlined */
a {
text-decoration:none;
}
/* makes the stuff for the tall posters */
.poster {
position: relative;
width: 100%;
border-radius: 15px;
max-width: 450px;
max-height: 601px;
}
.posterEffect {
position: relative;
width: 100%;
height: 135.55%;
max-width: 450px;
max-height: 601px;
}
.posterEffect img {
position:absolute;
left:0;
-webkit-transition: opacity 0.3s, transform 0.3s ease-in-out;
-moz-transition: opacity 0.3s, transform 0.3s ease-in-out;
-o-transition: opacity 0.3s, transform 0.3s ease-in-out;
transition: opacity 0.3s, transform 0.3s ease-in-out;
}
.posterEffect img.top:hover {
opacity:0;
}
.posterEffect:hover {
transform:scale(1.02,1.02);
}
/* makes the stuff for the wide posters */
.poster1 {
width: 100%;
border-radius: 15px;
max-width: 450px;
max-height: 260px;
}
.posterEffect1 {
position: relative;
width: 100%;
height: 57.78%;
max-width: 450px;
max-height: 260px;
}
.posterEffect1 img {
position:absolute;
left:0;
-webkit-transition: opacity 0.3s, transform 0.3s ease-in-out;
-moz-transition: opacity 0.3s, transform 0.3s ease-in-out;
-o-transition: opacity 0.3s, transform 0.3s ease-in-out;
transition: opacity 0.3s, transform 0.3s ease-in-out;
}
.posterEffect1 img.top:hover {
opacity:0;
}
.posterEffect1:hover {
transform:scale(1.02,1.02);
}
/* the main table holder for the posters */
.table {
width: 100%;
max-width: 900px;
border: 0px solid black;
text-align:center;
margin-left:auto;
margin-right:auto;
border-spacing: 4px;
}
/* sets the body properties */
body {
background-image:url('pic/lego.jpeg');
background-color: #ffd700;
text-align:center;
font-size: 25px;
}
/* the title attributes */
body{margin:0;padding:0}
#head {
background-image:url('pic/lego1.jpeg');
background-repeat:repeat;
width: 100%;
}
/*the menu line div attributes */
body{margin:0;padding:0}
#line {
background-image:url('pic/line.jpeg');
background-repeat:repeat;
width: 100%;
}
以下是演示https://jsfiddle.net/MalMan35/e9nebpoz/ 我的猜测是，因为它在tr和td标签中以某种方式搞砸了它。我尝试过很多东西，但无济于事。我真的很感激一些帮助。
答案 0 :(得分：0)
这是因为你在图像上使用绝对定位导致它们堆叠在相对div上。
.posterEffect img {
position:absolute; // <-- Remove this
left:0;
-webkit-transition: opacity 0.3s, transform 0.3s ease-in-out;
-moz-transition: opacity 0.3s, transform 0.3s ease-in-out;
-o-transition: opacity 0.3s, transform 0.3s ease-in-out;
transition: opacity 0.3s, transform 0.3s ease-in-out;
}
这将允许图像正常流动。我猜你正在这样做，所以你可以淡入一个新的图像，用不透明度覆盖它，对它有模糊效果。
使用CSS3，您实际上可以使用CSS创建模糊效果！这消除了在浏览器中加载多个图像并稍微清理代码的需要。
https://developer.mozilla.org/en-US/docs/Web/CSS/filter
CSS模糊效果
.posterEffect img{
width:300px;
height: auto; //use auto heigh to maintain scaling
-webkit-transition: filter 0.4s;
-moz-transition: filter 0.4s;
-o-transition: filter 0.4s;
transition: filter 0.4s;
}
.posterEffect img:hover{
filter: blur(10px)
}
答案 1 :(得分：0)
我真的没有挖掘如何解决你的问题 - 我还没有使用过表 - 但是如果你要重新设计你的网站，你应该重新制作你的布局。它将使您构建的未来网站变得更加容易。
使用表格不是，永远不会！ （仅限数据）
我为您提供了little jsbin example来自您网站的一些元素。希望您能更清楚地了解如何使用此构建布局。
仍有<很多东西要照顾和解决，但我认为这是一个很好的首发。
如果您需要更多帮助，我很乐意为您提供帮助。 ：）