Wie kann ich ein Squere-Bild auf den gesamten Bildschirm anpassen und Scrollen vermeiden?

Ich weiß ein oder zwei Dinge über HTML/CSS, aber ich bin kein Profi. Ich habe eine mit einem Bild 7,20cm x, 7,20cm und es füllt meine Bildschirmgröße perfekt, aber wenn ich es auf einem größeren Bildschirm sehe, wird es zu groß, so dass Sie die Schriftrolle haben und es sieht nicht ansprechend aus ... Wie kann ich den gleichen Effekt auf größeren Bildschirmen erzielen? Danke für alles, was Sie im voraus sagen.Wie kann ich ein Squere-Bild auf den gesamten Bildschirm anpassen und Scrollen vermeiden?

HTML 

<body> 
<div class="logo"> 
    <a href="projects.html" class="transition"> 
     <img src="lg.png" width="40%" alt="" /> 
    </a> 
</div> 
<footer>copyright 2016 matic toni</footer> 

</body> 

CSS 

@charset "utf-8"; 
div { 
text-align: center; 
padding-bottom: 30px; 
} 
body { 
/* background-image: url(background.jpg); 
background-sizce: cover; */ 
background-color: #F6F6F6; 
} 

.logo { 
padding-top:3%; 
} 

footer { 
font-family:"Proxima"; 
clear: both; 
color: black; 
font-size: 100%; 
margin-top: 5%; 
margin-right: 5%; 
margin-left: 5%; 
text-align: center; 

} 

li a img { 
padding-top: 3%; 
} 

@font-face { 
font-family: Proxima; 
src: url(Fonts/Proxima_Regular.otf); 
} 
img.logo { max-width: 100%; 

}

Quelle

2016-04-18 Matic Toni

etwas entlang der Linien dieser

background-image: url("background.jpg"); 
background-attachment: fixed; 
background-size: 100%; 
background-repeat: no-repeat; 
overflow: hidden;

Hinweis Versuchen Sie, dass dies nicht optimiert, sondern für eine einfache Modifikation organisiert.

Quelle

2016-04-18 19:59:51 Jon

.bgimage{ 
 
\t background: url(http://images.coolestwallpapers.com/user-content/uploads/wall/1280x854/36/091c7f2accfa32c8a9d912928a0220193e962075.jpg) no-repeat center; 
 
\t width: 100vw; 
 
\t height: 100vh; 
 
\t background-size: 100% 100%; 
 
}

<div class="bgimage"> 
 
\t 
 
</div>

Die Höhe und Breite ist auf die Gestaltung benötigt abhängig.

Quelle

2016-04-18 19:59:59

Da Ihr Code eine Fußzeile hat, kann das Bild nicht wirklich 100% hoch sein, es sei denn, Sie meinen es ist ein eigener Container?

aber ich glaube, dass flex und einige Verwendung von vertikalen Polsterung ein quadratisches Feld zu setzen, Sie some schließen

Idea ist ein Bild mit einer max-height und max-width wie die enthalten tun können Hintergrund- Größe, um ein Bild zu erhalten, das nie größer wird als seine Containerhöhe/-breite, unabhängig vom Verhältnis des Fensters.

Beispiel

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
body { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.logo { 
 
    width: 80vh;/* tune this , you may use calc() too */ 
 
    max-width: 80%;/* tune this */ 
 
    background: gray; 
 
    margin: auto; 
 
    position: relative; 
 
} 
 
.logo:before { 
 
    content: ''; 
 
    display: block; 
 
    padding-top: 100%;/* makes a square, */ 
 
} 
 
.logo a { 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    position: absolute; 
 
} 
 
.logo a img { 
 
    width: 100%;/* or height, it's a square one value is enough */ 
 
} 
 
footer { 
 
    text-align: center; 
 
    background: tomato; 
 
}

<div class="logo"> 
 
    <a href="projects.html" class="transition"> 
 
    <img src="http://dummyimage.com/200x200&[email protected]" alt="square" /><!--square of any size--> 
 
    </a> 
 
</div> 
 
<footer>copyright 2016 matic toni</footer>

, wenn ich falsch verstanden, dann wäre es viel mehr wie eine Hintergrund-Größe sein: enthalten; so eine andere Methode zu setzen, aber wieder absolute Positionierung, um Bild-Tag innerhalb von HTML

zu halten

Quelle

2016-04-18 21:05:46

Wie kann ich ein Squere-Bild auf den gesamten Bildschirm anpassen und Scrollen vermeiden?

Antwort

Verwandte Themen