0
Ich kann die Bilder nicht korrekt in der Tabelle ändern, wenn die Größe der Webseite geändert wird.Bildgröße ändern, wenn das Fenster der Webseite in der Größe geändert wird
Ich habe versucht, die Breite und Höhe mit dem% zu ändern, aber ich weiß nicht, wie Sie dieses Problem lösen! Kann mir jemand helfen?
zeigt Dieses Foto was passiert, wenn die Bilder richtig die Größe nicht:
body {
width: 99%;
height: 100%;
background-color: #EFEFEF;
}
table {
border-spacing: 10px;
}
img {
border-radius: 18px;
border: 4px solid black;
}
.headerBackground {
width: 100%;
height: 400px;
background-image: url(E:/Workspace/Sviluppo_Pagine_Internet/Blog/Blog_Images/AGGIUSTATE/UBUNTU.png);
background-size: 101% 149%;
background-repeat: no-repeat;
background-color: black;
border: 3px solid black;
border-radius: 20px;
}
.mainTable {
margin-top: 5%;
width: 44%;
height: 44%
}
.td6x6 {
width: 100%;
height: 100%;
}
.td3x3 {
width: 100%;
height: 100%;
}
.image6x6 {
width: 100%;
height: 70%;
}
.image3x3 {
width: 97%;
height: 70%;
}
.footer {
border: 3px solid black;
border-radius: 20px;
background-color: black;
width: 100%;
height: 100px;
text-align: center;
margin-top: 3%;
}<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="mainPage.css" />
<title></title>
</head>
<body>
<div class="headerBackground"></div>
<center>
<table class="mainTable">
<tr>
<!--PRIMA CELLA-->
<td class "td6x6">
<a href="E:\Workspace\Sviluppo_Pagine_Internet\Blog_Minimal\BlogPage.html">
<img src="E:\Workspace\Sviluppo_Pagine_Internet\Blog\Blog_Images\AGGIUSTATE\Blog.png" class="image6x6">
</a>
</td>
<!--SECONDA CELLA-->
<td class "td6x6">
<a href="https://github.com/user" target="GitHub">
<img src="E:\Workspace\Sviluppo_Pagine_Internet\Blog\Blog_Images\AGGIUSTATE\GitHub.png" class="image6x6">
</a>
</td>
</tr>
<tr>
<!--TERZA CELLA-->
<td class "td6x6">
<table style="border-spacing: 5px;">
<tr>
<td class "td3x3">
<a href="mailto:user">
<img src="E:\Workspace\Sviluppo_Pagine_Internet\Blog\Blog_Images\AGGIUSTATE\Email.png" class="image3x3" style="height: 67%">
</a>
</td>
<td class "td3x3">
<a href="https://www.linkedin.com/in/user" target="Linkedin">
<img src="E:\Workspace\Sviluppo_Pagine_Internet\Blog\Blog_Images\AGGIUSTATE\Linkedin.png" class="image3x3">
</a>
</td>
</tr>
<tr>
<td class "td3x3">
<a href="https://www.facebook.com/user" target="Facebook">
<img src="E:\Workspace\Sviluppo_Pagine_Internet\Blog\Blog_Images\AGGIUSTATE\Facebook.png" class="image3x3">
</a>
</td>
<td class "td3x3">
<a href="https://www.instagram.com/user/" target="Instagram">
<img src="E:\Workspace\Sviluppo_Pagine_Internet\Blog\Blog_Images\AGGIUSTATE\Instagram.png" class="image3x3">
</a>
</td>
</tr>
</table>
</td>
<!--QUARTA CELLA-->
<td class "td6x6">
<a href="E:\Workspace\Sviluppo_Pagine_Internet\Blog_Minimal\AboutPage.html">
<img src="E:\Workspace\Sviluppo_Pagine_Internet\Blog\Blog_Images\AGGIUSTATE\About.png" class="image6x6">
</a>
</td>
</tr>
</table>
</center>
<!--FOOTER-->
<div class="footer">
<h3 style="text-align: center; color: blue; font-size: 120%; padding-top: 1%">EMAIL</h3>
</div>
</body>
</html>
Was Ihre Klassen „image6x6“ und „td6x6“ sind? –