Wie kann ich diesen Code auf verschiedene Fenstergrößen skalieren?

Ich habe viele der Lösungen aus ähnlichen Fragen versucht, aber sie scheinen nicht auf meiner Seite zu funktionieren. Dies ist der Code, den ich skalieren möchte. Noch eine dünne, unter dem GIF möchte ich 3 Boxen pro Reihe behalten, da es so aussieht, dass wenn ich zu einer größeren Fenstergröße gehe, eine der Boxen nach oben fährt.Wie kann ich diesen Code auf verschiedene Fenstergrößen skalieren?

<hmtl> 
<body> 



<style> 



* { 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
margin: 0; 
padding: 0; 
} 

.item { 
position: relative; 
float:left; 
border: 0px solid #333; 
margin: 0%; 
overflow: hidden; 
width: 425px; 
} 
.item img { 
max-width: 100%; 

-moz-transition: all 1s; 
-webkit-transition: all 1s; 
transition: all 1s; 
} 
.item:hover img { 
-moz-transform: scale(1.1); 
-webkit-transform: scale(1.1); 
transform: scale(1.1); 
} 

</style> 


<div class=“main”> 

<img src="http://i.imgur.com/PbeUJ56.gif” style="position:absolute; top:0; left:0;" alt=“DESCRIPTION” height=“1280” width=“645”/> 




<img src="http://imgur.com/JBWbug1.png" style="position:absolute; top:0; left:0;" alt=“DESCRITPION” height=“2000” width=“720” alt="" usemap="#Map" /><map name="Map" id="Map"> 
<area alt="" title="" href="" shape="poly" coords="208,42,47,41,41,132,211,132" /> 
<area alt="" title="" href="" shape="poly" coords="467,73,467,98,654,99,654,74" /> 
<area alt="" title="" href=" shape="poly" coords="683,73,685,98,855,97,855,77" /> 
<area alt="" title="" href="" shape="poly" coords="883,71,883,97,986,96,986,77" /> 
<area alt="" title="" href="" shape="poly" coords="1007,69,1007,95,1092,95,1091,79"/> 
<area alt="" title="" href="" shape="poly" coords="1122,71,1122,100,1230,99,1230,71" /> </map> 





<div id="zoom"> 

<div class="item"> 
<a href=""><img src="http://imgur.com/jM0ivPh.png" alt="img"> 
</div> 

<div class="item"> 
<a href=""><img src="http://imgur.com/zMVcoiJ.png" alt="img"> 
</div> 

<div class="item"> 
<a href=""><img src="http://imgur.com/aVdSekS.png” alt="img" > 
</div> 

<div class="item"> 
<a href=""><img src="http://imgur.com/MKjyo1I.png” alt="img" > 
</div> 

<div class="item"> 
<a href=""><img src="http://imgur.com/tpYHlOP.png” alt="img" > 
</div> 

<div class="item"> 
<a href=""><img src="http://imgur.com/kzy9T7h.png” alt="img" > 
</div> 

</div> 
</div> 



<html> 
<body>

Quelle

2016-04-06 Rohit Kandula

Um es „Skala“ oder „reagieren, wie Sie wollen, müssen Sie es als Reaktion machen. Anstatt also Breiten mit Pixeln Einstellung zu machen (“ Pixel „) verwenden Prozent (“% ").

so Ihre „.item“ css ändern wie folgt:

 .item { 
      position: relative; 
      float: left; 
      border: 0 solid #333; 
      margin: 0; 
      overflow: hidden; 
      width: 33.3%; 
      max-width: 425px; 
     }

Dann müssen Sie Ihr Hauptbild zu entsprechend ändern jedoch aus dem Code, es scheint, dass Sie bevor Sie gehen können zu laufen könnte versuchen. ... Beginne klein und lerne die Grundlagen von Webdesign und Entwicklung elopment und bauen dort aus, zum Beispiel:

tun nicht immer das

* { 
    //... 
    }

dies für Ihre Anforderungen stattdessen tun:

.main div{ 
    //... 
}

Styling in-line nicht tun, wenn Sie müssen, so ist dies eine schlechte Praxis:

style="position:absolute; top:0; left:0;"

Alle „Endtags“ muss einen Schrägstrich wie so haben:

</body>

nicht

<body>

wie dies Ihr Anker-Tags schließen:

<a href=""><img src="http://imgur.com/jM0ivPh.png" alt="img"></a>

das nicht:

<a href=""><img src="http://imgur.com/jM0ivPh.png" alt="img">

Es empfohlen wird (< = HTML4 = erforderlich) zu setzen Stil Tags innerhalb th Das "Kopf" -Element und nicht das "Körper" -Element ...

Suchen Sie nach einigen Tutorials, (css, html) und dann, sobald Sie sich wohl fühlen, finden Sie einige Tutorials zu "responsive web design" über Bootstrap und Ähnlichkeiten ... Sobald Sie dieses Zeug kennen (es ist nicht schwer) - Sie sind auf dem besten Weg, eine gut aussehende responsive Website zu entwerfen.

Hope this Sie auf Ihrem Weg hilft ...

Quelle

2016-04-06 05:41:29 EaziLuizi

Ich verstehe Ihr Problem. Ich habe das Formatierungsproblem mit CSS Flexbox behoben. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Ich habe eine Medienabfrage bei 425px hinzugefügt, um das Spaltenlayout zusätzlich zum Raster zu unterstützen.

Es gibt ein paar kleine Bugs in Ihrem Code: 1) Die abschließenden HTML- und Body-Tags sind in umgekehrter Reihenfolge und müssen Schrägstriche zum Schließen verwenden. 2) Es gibt keinen "Kopf" in diesem HTML-Dokument, also habe ich einen hinzugefügt und das CSS dorthin verschoben. 3) Obwohl es nicht erforderlich ist, sollten Sie selbstschließende HTML-Tags wie zB img-Tags mit einem Schrägstrich/beenden. 4) Die 'a' -Tags benötigen schließende Tags. Hier ist der Arbeitscode:

<hmtl> 
 
    <head> 
 
    <style> 
 
    * { 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    margin: 0; 
 
    padding: 0; 
 
    } 
 
    .item { 
 
    position: relative; 
 
    float:left; 
 
    border: 0px solid #333; 
 
    margin: 0%; 
 
    overflow: hidden; 
 
    width: 425px; 
 
    } 
 
    .item img { 
 
    max-width: 100%; 
 
    -moz-transition: all 1s; 
 
    -webkit-transition: all 1s; 
 
    transition: all 1s; 
 
    } 
 
    .item:hover img { 
 
    -moz-transform: scale(1.1); 
 
    -webkit-transform: scale(1.1); 
 
    transform: scale(1.1); 
 
    } 
 
    .row-1, .row-2 { 
 
    display: flex; /* This is the fix for the item formatting problem */ 
 
    flex-direction: row; 
 
    } 
 
    @media screen and (max-width: 425px) { 
 
    .row-1, .row-2 { 
 
     display: flex; 
 
     flex-direction: column; 
 
    } 
 
    } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div class=“main”> 
 
    <img src="http://i.imgur.com/PbeUJ56.gif” style="position:absolute; top:0; left:0;" alt=“DESCRIPTION” height=“1280” width=“645”/> 
 
    <img src="http://imgur.com/JBWbug1.png" style="position:absolute; top:0; left:0;" alt=“DESCRITPION” height=“2000” width=“720” alt="" usemap="#Map" /> 
 
    <map name="Map" id="Map"> 
 
     <area alt="" title="" href="" shape="poly" coords="208,42,47,41,41,132,211,132" /> 
 
     <area alt="" title="" href="" shape="poly" coords="467,73,467,98,654,99,654,74" /> 
 
     <area alt="" title="" href=" shape="poly" coords="683,73,685,98,855,97,855,77" /> 
 
     <area alt="" title="" href="" shape="poly" coords="883,71,883,97,986,96,986,77" /> 
 
     <area alt="" title="" href="" shape="poly" coords="1007,69,1007,95,1092,95,1091,79"/> 
 
     <area alt="" title="" href="" shape="poly" coords="1122,71,1122,100,1230,99,1230,71" /> 
 
    </map> 
 
    <div id="zoom"> 
 
     <div class="row-1"> 
 
     <div class="item"> 
 
     <a href=""><img src="http://imgur.com/jM0ivPh.png" alt="img" /></a> 
 
     </div> 
 
     <div class="item"> 
 
     <a href=""><img src="http://imgur.com/zMVcoiJ.png" alt="img" /></a> 
 
     </div> 
 
     <div class="item"> 
 
     <a href=""><img src="http://imgur.com/aVdSekS.png” alt="img" /></a> 
 
     </div> 
 
     </div> 
 
     <div class='row-2'> 
 
     <div class="item"> 
 
     <a href=""><img src="http://imgur.com/MKjyo1I.png” alt="img" /></a> 
 
     </div> 
 
     <div class="item"> 
 
     <a href=""><img src="http://imgur.com/tpYHlOP.png” alt="img" /></a> 
 
     </div> 
 
     <div class="item"> 
 
     <a href=""><img src="http://imgur.com/kzy9T7h.png” alt="img" /></a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

Hoffnung, das hilft. Glückliche Kodierung.

Quelle

2016-04-06 05:58:49

Endergebnis: https://jsfiddle.net/Varinder/8fmkg4bq/

Eines der wichtigsten Dinge zu erinnern, wenn zu versuchen, nicht mit fester Breite oder Höhe auf ein beliebiges Element zu geben, wenn Sie es flüssig sein wollen (reaktions)

Also, ich ging weiter und entfernt width und height Attribute aus den image-Tags im Markup

Um die image-Tags Flüssigkeit zu machen, hinzugefügt, um diese CSS-Regel:

img { 
    max-width: 100%; 
}

Erstes Bild (welches ein gif ist) kann als Hintergrundbild verwendet werden? Also, wen Sie vor und fügte background Eigenschaften zum .main Behälter

, die das zweite Bild (png) gemacht oben zu überlagern schön

Nun, da das PNG-Bild überlagert wird und Flüssigkeit. Die Bildkartenbereiche alle aus aufgeführt sind, die unter Verwendung von responsive image maps plugin

Hinblick auf die Bodenfliesen zu Flüssigkeit zu allen Zeiten und gewährleisten nur 3 Fliesen vorhanden sind pro Reihe befestigt ist - hinzugefügt width: 33% es 100/3

Hoffnung dies hilft ☮

Quelle

2016-04-06 06:04:10 Varinder

Wie kann ich diesen Code auf verschiedene Fenstergrößen skalieren?

Antwort

Verwandte Themen