Wie ändere ich das Bild, wenn ich die Größe des Browsers ändere?

Ich habe keine Ahnung, wie Bild von Dias zu ändern, wenn ich Telefongröße des Bildschirms gehe. Ich habe BootStrap verwendet, um meine erste Website zu erstellen. Es sieht gut aus auf dem Computer, aber das gesamte Bild skaliert zu sehr klein, wenn ich die Bildschirmgröße ändern, gibt es eine Idee, Display-Bild innerhalb der Folie zu ersetzen, wenn Bildschirmgröße geändert? Ich brauche CSS-Code für Veränderungen es dankWie ändere ich das Bild, wenn ich die Größe des Browsers ändere?

<!DOCTYPE html> 
<html lang="en"> 
<head></head> 

<!-- Carousel 
================================================== --> 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
    </ol> 
    <div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
      <img class="first-slide" src="image/N-house000.jpg" alt="First slide"> 
      <div class="container"> 
       <div class="carousel-caption"> 
        <h1>IntopHome LTD</h1> 
        <p><a class="btn btn-lg btn-primary" href="contact.html" role="button">CONTACT US</p></a> 
       </div> 
      </div> 
     </div> 
    </div> 
</html>

Quelle

2016-12-15 Shiliang Fang

Haben Sie body' Tag nicht brauchen '? –

hi, da hat es body tag, ich kopiere nur einen teil meines codes.nicht alle. –

Verwenden Sie die Medienabfrage und ändern Sie die Höhe des Bildschiebers in unterschiedlicher Auflösung. Sie können Bootstrap/MDL für Responsive Design verwenden. –

Sie haben css media queries zu verwenden, wenn Sie es nur mit CSS umgehen müssen,

für Sie Mein Vorschlag ist, 2 verschiedene Schieberegler, um Seite zu initialisieren, die größer enthält Bilder für Handy-Display, in Ihrer CSS Abfrage verstecken einfach, dass man für den Desktop und mobil zeigen,

CSS Beispiel:

@media only screen and (max-width: 990px) { 
    .desktop_slider{display:none; visibility: hidden;} 
    .mobile_slider{display:block; visibility: visible;} 
}

Quelle

2016-12-15 11:24:54

Awsome, Danke! –

Wie ändere ich das Bild, wenn ich die Größe des Browsers ändere?

Antwort

Verwandte Themen