0
ウェブページのサイズを変更すると、テーブル内のイメージのサイズを正しく変更できません。ウェブページのサイズが変更されたときにイメージのサイズを変更します
％を使用して幅と の高さを変更しようとしましたが、この問題の解決方法はわかりません。誰か助けてくれますか？
この写真はイメージが正しくサイズを変更していないときに何が起こるかを示しています。
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>
あなたのクラス「image6x6」と「td6x6」とは何ですか？ –