Web sayfasının penceresi yeniden boyutlandırılırken yeniden boyutlandırır.

Web sayfası yeniden boyutlandırıldığında, görüntüleri tablo içerisinde doğru şekilde yeniden boyutlandıramıyorum.Web sayfasının penceresi yeniden boyutlandırılırken yeniden boyutlandırır.

% 1 kullanarak genişliği ve yüksekliğini değiştirmeyi denedim ancak bu sorunu nasıl çözeceğimi bilmiyorum! Birisi bana yardım edebilir mi? ; Yükseklik% 100:

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>

kaynak

2016-03-28 Jacob

üzerinde iyi bir makale nelerdir senin sınıfların "image6x6" ve "td6x6"? –

Max-genişliğini kullanmak gerekir:

Bu fotoğraf görüntüleri doğru yeniden boyutlandırmak yok ne olduğu gösterilmektedir auto; Resimler için bu img gibi {Max-width: 100%; height: auto; } ve elemet tabloları Web sitesi iskelesi

kaynak

2016-03-28 21:41:13 Naci

için eski olan en iyi başlangıç toprağınızın img etiketindeki herhangi bir 'genişlik' veya 'yükseklik' özelliklerini kaldırmak olacaktır. Resmin ölçeklenmesini istiyorsanız, img'de veya '.image6x6' örneğinizde 'maks-width: 100%' değerini kullanmanız iyi bir kuraldır. bu şekilde, kap görüntü içeriğinin boyutunu kontrol edecektir.

İşte ölçekleme görüntüleri http://www.w3schools.com/css/css_rwd_images.asp

kaynak

2016-03-28 21:43:24

Web sayfasının penceresi yeniden boyutlandırılırken yeniden boyutlandırır.

cevap

İlgili konular