1. Zuhause
  2. Frage und Antwort
  3. Löschen oder Ändern der Größe der Bilder für verschiedene Divs, je nachdem, in welchem ​​@media sie sich befinden?

Löschen oder Ändern der Größe der Bilder für verschiedene Divs, je nachdem, in welchem ​​@media sie sich befinden?

2016-04-04 3 views
0

So habe ich herausgefunden, wie @media verwendet wird, um die Breite für meine Website zu ändern, aber die Schaltflächenbilder werden sehr klein und wollten die Größe für einen Teil der Website ändern. Ich habe herausgefunden, wie man alle Bilder auf der Website ändert, um eine größere Bildgröße zu bekommen, aber es macht die Dinge irgendwie fehl am Platz!Löschen oder Ändern der Größe der Bilder für verschiedene Divs, je nachdem, in welchem ​​@media sie sich befinden?

@media only screen and (max-device-width: 480px) { 
 
img { 
 
    width: 65px; 
 
    height: 65px; 
 
} 
 
}

so, wenn ich nur die Behälter div Bilder auf eine bestimmte Höhe/Breite, was soll ich tun ändern wollte? Auch können Sie ein Bild nicht einmal mit einem div zu tun, wie ein einzelnes Bild im HTML mit diesen @media? und letzte Sache, während ich frage, können Sie Bilder mit @media verschwinden lassen? Ich habe jetzt eine Weile im Internet nach einer Antwort gesucht und kann das nicht herausfinden !!! jede Hilfe würde wirklich geschätzt werden :) danke Heres der Code zu meiner Website, wenn das benötigt wird? und meine Website ist www.lawrencetrigg.tk Prost Jungs und Mädchen! 

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Lawrence Trigg</title> 
 
<link rel="images/favicon.ico" href="images/favicon.ico"> 
 
<style type="text/css"> 
 

 

 

 

 
a:-webkit-any-link{ 
 
text-decoration:none !important; 
 
} 
 
body { 
 
\t background-color: black; 
 
} 
 
#top { 
 
    position: absolute; 
 
    top: 0px; 
 
    background-image: url("images/background-top-one.jpg"); 
 
    background-repeat: repeat-x; 
 
    left: 0; 
 
    right: 0; 
 
    width: 750px; 
 
    height: 100%; 
 
    text-align: center; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 

 
} 
 
#bottom1 { 
 
    position: fixed; 
 
    background-image: url("images/background-bottom-one.jpg"); 
 
    bottom: 0px; 
 
    left: 0; 
 
    right: 0; 
 
    width: 750px; 
 
    height: 150px; 
 
    color: black; 
 
    text-align: center; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    
 
} 
 

 
div.transbox { 
 
font-size: 16px; 
 

 
    margin: 30px; 
 
    background-color: #AAAAAA; 
 
    border: 1px solid black; 
 
    opacity: 0.7; 
 
    filter: alpha(opacity=60); /* For IE8 and earlier */ 
 
} 
 

 
div.transbox p { 
 
    margin: 5%; 
 
    font-weight: bold; 
 
    color: #000000; 
 
} 
 
div.col-middle-one { 
 
\t float: left; 
 
\t width: 100%; 
 
\t font-size: 20px; 
 
\t padding: 1px; 
 

 
\t height: 250px; 
 

 
\t 
 
\t border-color: white; 
 
\t color: white; 
 
\t top: 50px; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
\t top: 0px; 
 
} 
 

 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: inline-block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover { 
 
    background-color: #111; 
 
} 
 

 

 
a.tooltip {outline:none; } 
 
a.tooltip strong {line-height:30px;} 
 
a.tooltip:hover {text-decoration:none;} 
 
a.tooltip span { 
 
    z-index:10;display:none; padding:14px 20px; 
 
    margin-top:60px; margin-left:-160px; 
 
    width:300px; line-height:16px; 
 
} 
 
a.tooltip:hover span{ 
 
    display:inline; position:absolute; 
 
    border:2px solid #FFF; color:#EEE; 
 
    background:#333 url(cssttp/css-tooltip-gradient-bg.png) repeat-x 0 0; 
 
} 
 
.callout {z-index:20;position:absolute;border:0;top:-14px;left:120px;} 
 
    
 
/*CSS3 extras*/ 
 
a.tooltip span 
 
{ 
 
    border-radius:2px;   
 
    box-shadow: 0px 0px 8px 4px #666; 
 
    /*opacity: 0.8;*/ 
 
} 
 

 

 
@media screen and (max-width:850px) { 
 
\t 
 
\t #top { 
 
    position: absolute; 
 
    top: 0px; 
 
    background-image: url("images/background-top-one.jpg"); 
 
    background-repeat: repeat-x; 
 

 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 

 
} 
 
#bottom1 { 
 
    position: fixed; 
 
    background-image: url("images/background-bottom-one.jpg"); 
 
    bottom: 0px; 
 
    width: 100%; 
 
    height: 150px; 
 
    color: black; 
 
    text-align: center; 
 
    
 
} 
 
} 
 
@media only screen and (max-device-width: 480px) { 
 
img { 
 
    width: 65px; 
 
    height: 65px; 
 
} 
 
\t #top { 
 
    position: absolute; 
 
    top: 0px; 
 
    background-image: url("images/background-top-one.jpg"); 
 
    background-repeat: repeat-x; 
 
font-size: 25px; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 

 
} 
 
#bottom1 { 
 
    position: fixed; 
 
    background-image: url("images/background-bottom-one.jpg"); 
 
    bottom: 0px; 
 
    width: 100%; 
 
    height: 250px; 
 
    color: black; 
 
    text-align: center; 
 
    
 
    
 
} 
 
div.transbox { 
 
font-size: 25px; 
 

 
    margin: 30px; 
 
    background-color: #AAAAAA; 
 
    border: 1px solid black; 
 
    opacity: 0.7; 
 
    filter: alpha(opacity=60); /* For IE8 and earlier */ 
 
} 
 

 
} 
 

 

 
</style> 
 
</head> 
 

 
<body> 
 
<div id="top"> 
 

 
<div class="col-top-one"> 
 
<ul> 
 
    <li><a class="active" href="index.html">Home</a></li> 
 
    <li><a href="education.html">Education</a></li> 
 
    <li><a href="#skills.html">Skills</a></li> 
 
    <li><a href="#work.html">Work</a></li> 
 
    <li><a href="#gym.html">Gym</a></li> 
 
    <li><a href="images/cv/lawrencecv2016.docx">Download CV</a></li> 
 
    
 
    <a href="https://www.facebook.com/Lawrencetrigg" class="tooltip"> 
 
    <img src="images/icons/social-facebook32.png" onmouseover="this.src='images/icons/social-facebook322.png'" onmouseout="this.src='images/icons/social-facebook32.png'" /> 
 
    <span> 
 
     <img class="callout" src="images/callout_black.gif" /> 
 
     <img src="images/icons/social-facebook32.png" style="float:right;" /> 
 
     <strong>Facebook</strong><br /> 
 

 
    </span> 
 
</a> 
 
    <a href="https://www.steam.com" class="tooltip"> 
 
    <img src="images/icons/social-steam32.png" onmouseover="this.src='images/icons/social-steam322.png'" onmouseout="this.src='images/icons/social-steam32.png'" /> 
 
    <span> 
 
     <img class="callout" src="images/callout_black.gif" /> 
 
     <img src="images/icons/social-steam32.png" style="float:right;" /> 
 
     <strong>Steam</strong><br /> 
 

 
    </span> 
 
</a> 
 
<a href="https://www.youtube.com" class="tooltip"> 
 
    <img src="images/icons/social-youtube32.png" onmouseover="this.src='images/icons/social-youtube322.png'" onmouseout="this.src='images/icons/social-youtube32.png'" /> 
 
    <span> 
 
     <img class="callout" src="images/callout_black.gif" /> 
 
     <img src="images/icons/social-youtube32.png" style="float:right;" /> 
 
     <strong>Youtube</strong><br /> 
 

 
    </span> 
 
</a> 
 
<a href="https://www.dropbox.com" class="tooltip"> 
 
    <img src="images/icons/social-dropbox32.png" onmouseover="this.src='images/icons/social-dropbox322.png'" onmouseout="this.src='images/icons/social-dropbox32.png'" /> 
 
    <span> 
 
     <img class="callout" src="images/callout_black.gif" /> 
 
     <img src="images/icons/social-dropbox32.png" style="float:right;" /> 
 
     <strong>Dropbox</strong><br /> 
 

 
    </span> 
 
</a> 
 
<a href="https://www.skype.com" class="tooltip"> 
 
    <img src="images/icons/social-skype32.png" onmouseover="this.src='images/icons/social-skype322.png'" onmouseout="this.src='images/icons/social-skype32.png'" /> 
 
    <span> 
 
     <img class="callout" src="images/callout_black.gif" /> 
 
     <img src="images/icons/social-skype32.png" style="float:right;" /> 
 
     <strong>Skype</strong><br /> 
 

 
    </span> 
 
</a> 
 
    <a href="https://www.google.com" class="tooltip"> 
 
    <img src="images/icons/social-googleplus32.png" onmouseover="this.src='images/icons/social-googleplus322.png'" onmouseout="this.src='images/icons/social-googleplus32.png'" /> 
 
    <span> 
 
     <img class="callout" src="images/callout_black.gif" /> 
 
     <img src="images/icons/social-googleplus32.png" style="float:right;" /> 
 
     <strong>Google Plus</strong><br /> 
 

 
    </span> 
 
</a> 
 

 

 
</ul> 
 
<div class="col-middle-one"> 
 

 

 

 
<div class="transbox"> 
 
    <p>Lawrence William Trigg</p> 
 
<p>I am a bright, young and ambitious individual who is self-motivated and organised. I can work well under pressure and am able to meet targets and deadlines, I am eager to learn new skills and feel the ones currently gained give a vast and varied history to draw from and implement in new situations. Working well within a team is something I enjoy, however I am also capable of working under my own initiative. </p> 
 
</div> 
 
<div class="transbox"> 
 
    <p>Under Construction</p> 
 
    
 
</div> 
 
</div> 
 

 
</div> 
 
<div id="bottom1"> 
 
<a href="#" class="tooltip"> 
 
    <img src="images/icons/icon-mobile1.png" onmouseover="this.src='images/icons/icon-mobile2.png'" onmouseout="this.src='images/icons/icon-mobile1.png'" /> 
 
    <span> 
 
     <img class="callout" src="images/callout_black.gif" /> 
 
     <img src="images/icons/icon-mobile1.png" style="float:right;" /> 
 
     <strong>Mobile Number</strong><br /> 
 
     0481718550 
 
    </span> 
 
</a> 
 
<a href="#" class="tooltip"> 
 
    <img src="images/icons/icon-email1.png" onmouseover="this.src='images/icons/icon-email2.png'" onmouseout="this.src='images/icons/icon-email1.png'" /> 
 
    <span> 
 
     <img class="callout" src="images/callout_black.gif" /> 
 
     <img src="images/icons/icon-email1.png" style="float:right;" /> 
 
     <strong>Email Address</strong><br /> 
 
     [email protected] 
 
    </span> 
 
</a> 
 
<a href="#" class="tooltip"> 
 
    <img src="images/icons/icon-picture1.png" onmouseover="this.src='images/icons/icon-picture2.png'" onmouseout="this.src='images/icons/icon-picture1.png'" /> 
 
    <span> 
 
     <img class="callout" src="images/callout_black.gif" /> 
 
     <img src="images/icons/icon-picture1.png" style="float:right;" /> 
 
     <strong>Name</strong><br /> 
 
     Lawrence Trigg 
 
    </span> 
 
</a> 
 
<a href="#" class="tooltip"> 
 
    <img src="images/icons/icon-home1.png" onmouseover="this.src='images/icons/icon-home2.png'" onmouseout="this.src='images/icons/icon-home1.png'" /> 
 
    <span> 
 
     <img class="callout" src="images/callout_black.gif" /> 
 
     <img src="images/icons/icon-home1.png" style="float:right;" /> 
 
     <strong>Test</strong><br /> 
 
    Home 
 
    </span> 
 
</a> 
 
<a href="#" class="tooltip"> 
 
    <img src="images/icons/icon-favorite1.png" onmouseover="this.src='images/icons/icon-favorite2.png'" onmouseout="this.src='images/icons/icon-favorite1.png'" /> 
 
    <span> 
 
     <img class="callout" src="images/callout_black.gif" /> 
 
     <img src="images/icons/icon-favorite1.png" style="float:right;" /> 
 
     <strong>Test</strong><br /> 
 
    Favorite 
 
    </span> 
 
</a> 
 
<a href="#" class="tooltip"> 
 
    <img src="images/icons/icon-website1.png" onmouseover="this.src='images/icons/icon-website2.png'" onmouseout="this.src='images/icons/icon-website1.png'" /> 
 
    <span> 
 
     <img class="callout" src="images/callout_black.gif" /> 
 
     <img src="images/icons/icon-website1.png" style="float:right;" /> 
 
     <strong>Website</strong><br /> 
 
    http://lawrencetrigg.tk/ 
 
    </span> 
 
</a> 
 
<a href="#" class="tooltip"> 
 
    <img src="images/icons/icon-dob1.png" onmouseover="this.src='images/icons/icon-dob2.png'" onmouseout="this.src='images/icons/icon-dob1.png'" /> 
 
    <span> 
 
     <img class="callout" src="images/callout_black.gif" /> 
 
     <img src="images/icons/icon-dob1.png" style="float:right;" /> 
 
     <strong>Date Of Birth</strong><br /> 
 
    8th May 1989/26 Years old 
 
    </span> 
 
</a> 
 
<a href="#" class="tooltip"> 
 
    <img src="images/icons/icon-location1.png" onmouseover="this.src='images/icons/icon-location2.png'" onmouseout="this.src='images/icons/icon-location1.png'" /> 
 
    <span> 
 
     <img class="callout" src="images/callout_black.gif" /> 
 
     <img src="images/icons/icon-location1.png" style="float:right;" /> 
 
     <strong>Test</strong><br /> 
 
    Location 
 
    </span> 
 
</a> 
 

 

 
</div> 
 
</body> 
 
</html>

Quelle

2016-04-04 Lawrence William Trigg

+0

Sie Id und Klassen innerhalb @media in CSS verwenden können. –

Antwort

0

Alles, was Sie unter @media{...} Tag hinzufügen, wird nur auf bestimmte Bildschirmgröße arbeiten. Zum Beispiel funktionieren alle Regeln, die im folgenden Medienblock erwähnt werden, nur wenn die width of the screen is <= 480px, sonst wird es nicht funktionieren. So können Sie verbergen, ändern Höhe tun andere Sachen für bestimmte Bildschirmgrößen:

@media only screen and (max-device-width: 480px){..}

(Wenn ich) nur die Behälter div Bilder bis zu einem gewissen Höhe/Breite ändern wollte, was soll ich tun?

Fügen Sie sie unter @media Tag

@media...//screen size{ 

.certain-image-class{ 
    //css rules here 
} 
}

Sie können auch ein Bild ändern, nicht einmal mit einem div zu tun, wie ein einzelnes Bild im html diese @media verwenden?

Ja, genau wie oben. Ordnen Sie das Bild ein class oder id

@media...//screen size{ 

    .myImage{ 
     //css rules here 
    } 

    #myImage{ 
     //css rules here 
    } 
    }

letzte, was während im fragen, können Sie Bilder verschwinden zu lassen, mit @media?

Ja, gleich wie oben (Klasse oder Id verwenden); das Bild zeigt, wird nicht auf der Bildschirmgröße angegeben:

@media...//screen size{ 

     .myImage{ 
      display:none; 
     } 

     #myImage{ 
     display:none; 
     } 
     }

Quelle

2016-04-04 00:37:44 TheUknown

+0

Vielen Dank für die Antwort! Werde dies versuchen :) geschätzt! –

Verwandte Themen

 Verwandte Themen