【发布时间】：2016-05-06 21:06:19
【问题描述】：
好的，所以我一直在重新开发我的网站，试图让它看起来更专业，并且我所知道的一切都是我使用在线资源自学的。我在路上遇到了一个颠簸，所以这是我的问题。 （如果是非常明显的事情，请有点伪造。我只有 14 岁，只用 HTML 和 CSS 编码大约一年。）
我的网站是我的乐高定格动画视频（我除了编码之外的另一个爱好），我想制作它，这样我所有的电影海报就像拼贴画一样。我已经成功地做到了这一点，但它使用的是精确的 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 标签中，不知何故搞砸了。我尝试了很多东西，但无济于事。非常感谢您的帮助。
【问题讨论】：
-
这确实不是表格的好用处。表格只能用于数据，不能用于布局。
-
@magnetwd 虽然我 100% 同意你的观点，但有关如何更好地布局页面的一些指导会有所帮助。
-
@DarrenS 是的，请！
标签： html css image-resizing