resizable drei Spalte Hintergrundbild/Cover-Layout

Hintergrund Abdeckung und Prozentsatz Breite tun den Job Skalierung und Ausrichtung von Bildern für Fälle Ansichtsfenster ist mehr horizontal als 16/9. Für Fälle, in denen die Bildschirmhöhe mehr als 0,5625 beträgt, beginnen die äußeren Layoutteile mit der Mitte. In diesem Fall ist es besser, von links und rechts zu schneiden, oder oben und unten leere Balken hinzuzufügen.resizable drei Spalte Hintergrundbild/Cover-Layout

Bitte geben Sie Ihre bekannten Best Practices an. Vielen Dank für die Teilnahme, Frieden, ayo.

<div class="bg"> 
</div> 
<div class="column" id="column_left"> 
</div> 
<div class="column" id="column_center"> 
</div> 
<div class="column" id="column_right"> 
</div>

css:

bg { 
    position: relative; 
    overflow: hidden; 
    height: 100%; 
    width: 100%; 
    max-width: 1920px; 
    background: url(images/1920/bg.png) no-repeat center 0 /cover; 
} 

.column { 
    max-width: 100%; 
    opacity: 0; 
    display: block; 
    -webkit-transition: opacity 0.5s ease-in-out; 
    -moz-transition: opacity 0.5s ease-in-out; 
    transition: opacity 0.5s ease-in-out; 
    position: absolute; 
    height: 100%; 

    &:hover { 
     opacity: 1; 
     cursor: pointer; 
    } 
} 

#column_left { 
    float: left; 
    left: 0; 
    width: 38.85%; 
    background: url(images/1920/left.png) no-repeat 0 0 /cover; 
} 

#column_center { 
    float: left; 
    left: 0; 
    right: 0; 
    margin-left: 26.17%; 
    width: 44.69%; 
    background: url(images/1920/center.png) no-repeat center 0 /cover; 
} 

#column_right { 
    float: right; 
    right: 0; 
    width: 39.58%; 
    background: url(images/1920/right.png) no-repeat 100% 0 /cover; 
}

Quelle

2017-06-13 Ed Dubnitsky

würde ich nur mit 'Objekt-fit empfehlen: Abdeckung,' um sicherzustellen, dass die Breite des Ansichtsfensters schrumpft auf die Mitte des Bildes schrumpft, ohne oder Dehnung schrumpfen. –

Ich bin mir nicht sicher, ob jemand anderes Schwierigkeiten hat, Ihr Problem zu verstehen, aber um Ihre Chancen auf eine Antwort zu verbessern, wäre es gut, ein Snippet/Fiddle/Codepen mit Platzhalterbildern zu erstellen, die Ihr Problem genau zeigen. – WizardCoder

Können Sie clearify, was Sie zu achive versuchen? Von dem, was ich erfassen kann, klingt es, als ob du vielleicht von Cover zu Hintergrundbildgröße wechseln möchtest?

background: url(images/1920/left.png) no-repeat 0 0 /cover;

background: url(images/1920/left.png) no-repeat 0 0; 
background-size: contain;

Quelle

2017-06-13 20:44:21

resizable drei Spalte Hintergrundbild/Cover-Layout

Antwort

Verwandte Themen