Wie div Höhe zu bekommen Auto-Adjust auf Hintergrundgröße?
https://stackoverflow.com/questions/600743
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Wie erhalte ich ein div auf die Größe des Hintergrunds ich es automatisch einzustellen, ohne eine bestimmte Höhe (oder min-height) für das Einstellen?
Lösung
Eine weitere, vielleicht ineffizient, Lösung wäre, das Bild unter einem img Elemente enthält auf visibility: hidden;. Dann machen die background-image der umgebenden div das gleiche wie das Bild.
Dies wird die umgebende div auf die Größe des Bildes im img Elemente festgelegt, sondern es als Hintergrund angezeigt werden soll.
<div style="background-image: url(http://your-image.jpg);">
<img src="http://your-image.jpg" style="visibility: hidden;" />
</div>
Andere Tipps
Es ist eine sehr schöne und coole Art, ein Hintergrundbild Arbeit wie ein img Element zu machen, damit es seine height automatisch anpassen. Sie müssen das Bild width und height Verhältnis kennen. Stellen Sie den height des Behälters auf 0 und setzen Sie den padding-top als Prozentsatz bezogen auf das Bildverhältnis.
Es wird wie folgt aussehen:
div {
background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 66.64%; /* (img-height / img-width * container-width) */
/* (853 / 1280 * 100) */
}
Sie haben nur ein Hintergrundbild mit Auto-Höhe, das genau wie ein img-Element funktioniert. Hier ist ein funktionsfähiger Prototyp (Sie können die div Höhe Größe und überprüfen): http://jsfiddle.net/TPEFn/ 2 /
Es gibt keine Möglichkeit, automatische Einstellung für die Hintergrundbildgröße mit Hilfe von CSS.
Sie können um es hacken durch das Hintergrundbild auf dem Server zu messen und dann diese Attribute auf den div Anwendung, wie andere schon erwähnt haben.
Sie können auch einige Javascript zerhacken, um die div der Größe auf der Basis der Bildgröße (sobald das Bild heruntergeladen wurde.) - das ist im Grunde die gleiche Sache
Wenn Sie Ihr div zu auto-passe das Bild brauchen, könnte ich fragen, warum Sie nicht nur einen <img> Tag in Ihrem div setzen?
Diese Antwort ist für andere ähnlich, aber insgesamt ist das Beste für die meisten Anwendungen. Sie müssen die Bildgröße vor der Hand wissen, was Sie in der Regel tun. So können Sie Overlay-Text hinzufügen, Titel usw. ohne negative Polsterung oder absolute Positionierung des Bildes. Der Schlüssel ist es, die Polsterung% einzustellen das Seitenverhältnis des Bildes zu entsprechen, wie im Beispiel unten gesehen. Ich benutzen diese Antwort und im Wesentlichen hat soeben ein Bild Hintergrund.
.wrapper {
width: 100%;
/* whatever width you want */
display: inline-block;
position: relative;
background-size: contain;
background: url('https://upload.wikimedia.org/wikipedia/en/thumb/6/67/Wiki-llama.jpg/1600px-Wiki-llama.jpg') top center no-repeat;
margin: 0 auto;
}
.wrapper:after {
padding-top: 75%;
/* this llama image is 800x600 so set the padding top % to match 600/800 = .75 */
display: block;
content: '';
}
.main {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
color: black;
text-align: center;
margin-top: 5%;
}<div class="wrapper">
<div class="main">
This is where your overlay content goes, titles, text, buttons, etc.
</div>
</div>
Vielleicht kann dies dazu beitragen, es ist nicht gerade ein Hintergrund, aber Sie bekommen die Idee:
<style>
div {
float: left;
position: relative;
}
div img {
position: relative;
}
div div {
position: absolute;
top:0;
left:0;
}
</style>
<div>
<img src="http://antwrp.gsfc.nasa.gov/apod/image/0903/omegacen_davis.jpg" />
<div>Hi there</div>
</div>
Ziemlich sicher, dass dies nie hier unten den ganzen Weg gesehen. Aber wenn Ihr Problem ist das gleiche wie meine ist, das war meine Lösung:
.imaged-container{
background-image:url('<%= asset_path("landing-page.png") %> ');
background-repeat: no-repeat;
background-size: 100%;
height: 65vw;
}
Ich wollte einen div in der Mitte des Bildes haben, und das wird mich davon ermöglichen.
Es ist eine reine CSS-Lösung, die die anderen Antworten verpaßt haben.
Der „Inhalt“. Eigenschaft wird hauptsächlich verwendet, um Text-Inhalt in ein Element einzufügen, sondern kann auch verwendet werden, um Bildinhalt einfügen
.my-div:before {
content: url("image.png");
}
Dies bewirkt, dass die div seine Höhe an die tatsächlichen Pixelgröße des Bildes ändern. Um die Größe zu, die Breite hinzu:
.my-div {
display: inline-block;
}
Sie können es Server-Seite tun: durch das Bild zu messen und dann die div Größeneinstellung, oder das Bild mit JS Laden, lesen Sie es Attribute und dann die DIV Größe
.Und hier ist eine Idee, setzen Sie das gleiche Bild innerhalb des div als IMG-Tag, sondern gibt ihm Sichtbarkeit. Versteckt + mit Position relativ spielt + gibt diese das Bild als Hintergrund div
hatte ich dieses Problem und Hasanavi Antwort gefunden, aber ich habe einen kleinen Fehler, wenn das Hintergrundbild auf einem Breitbild-Anzeige -. Das Hintergrundbild nicht auf die gesamte Breite des Bildschirms verteilt hat
So, hier ist meine Lösung - basierend auf Hasanavi den Code aber besser ... und dies sollte auf beiden extrabreiten und mobilen Bildschirmen arbeiten
./*WIDE SCREEN SUPPORT*/
@media screen and (min-width: 769px) {
div {
background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 66.64%; /* (img-height / img-width * container-width) */
/* (853 / 1280 * 100) */
}
}
/*MOBILE SUPPORT*/
@media screen and (max-width: 768px) {
div {
background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 66.64%; /* (img-height / img-width * container-width) */
/* (853 / 1280 * 100) */
}
}
Wie Sie vielleicht bemerkt haben, die background-size: contain; Eigenschaft doas gut paßt nicht in extra breiten Bildschirmen und die background-size: cover; Eigenschaft paßt nicht gut auf mobilen Bildschirmen, damit ich dieses @media Attribut mit den Bildschirmgrößen zu spielen, um und um dieses Problem zu beheben.
Wie wäre es damit:)
.fixed-centered-covers-entire-page{
margin:auto;
background-image: url('https://i.imgur.com/Ljd0YBi.jpg');
background-repeat: no-repeat;background-size:cover;
background-position: 50%;
background-color: #fff;
left:0;
right:0;
top:0;
bottom:0;
z-index:-1;
position:fixed;
}<div class="fixed-centered-covers-entire-page"></div>
Wenn es ein einzelne vorgegebenes Hintergrundbild ist, und Sie wollen, dass die div in Reaktion auf sein, ohne das Seitenverhältnis des Hintergrundbildes zu verzerren Sie zuerst das Seitenverhältnis des Bildes berechnen und dann einen div erstellen, die bewahrt Seitenverhältnis ist durch Sie folgendermaßen vorgehen:
Angenommen, Sie ein Seitenverhältnis von 4/1 und die Breite des div wollen, ist 32%:
div {
width: 32%;
padding-bottom: 8%;
}
Dies resultiert aus der Tatsache, dass Polsterung auf der Breite des umschließenden Elements berechnet basiert.
Kann dies helfen kann, es ist nicht gerade ein Hintergrund, aber Sie die einfache Idee
<style>
div {
float: left;
position: relative;
}
div img {
position: relative;
}
div div {
position: absolute;
top:0;
left:0;
}
</style>
<div>
<img src="http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg" />
<div>Hello</div>
</div>
Sie können so etwas tun
<div style="background-image: url(http://your-image.jpg); position:relative;">
<img src="http://your-image.jpg" style="opacity: 0;" />
<div style="position: absolute;top: 0;width: 100%;height: 100%;">my content goes here</div>
</div>
Um dieses Problem mit dem Umbraco CMS Had und in diesem Szenario können Sie das Bild auf die div mit so etwas wie dies für den ‚Stil‘ Attribut des div hinzufügen:
style="background: url('@(image.mediaItem.Image.umbracoFile)') no-repeat scroll 0 0 transparent; height: @(image.mediaItem.Image.umbracoHeight)px"
Ich habe eine Zeit lang mit diesem Thema beschäftigt und beschlossen, eine jQuery-Plugin zu schreiben, um dieses Problem zu lösen. Dieses Plugin wird alle Elemente mit Klasse „Show-bg“ finden (oder Sie können es Ihren eigenen Wähler passieren) und die Hintergrundbild Dimensionen berechnen. alles, was Sie tun müssen, ist dieser Code enthält, um die gewünschten Elemente mit class = "Show markiert
Genießen Sie!
Die beste Lösung, die ich denken kann, ist durch Ihre Breite und Höhe in Prozent angeben. Auf diese Weise können Sie Ihren Bildschirm auf der Grundlage Ihrer Monitorgröße schalte. sein mehr ansprechbar Layout ..
Für eine Instanz. Sie haben
<br/>
<div> . //This you set the width percent to %100
<div> //This you set the width percent to any amount . if you put it by 50% , it will be half
</div>
</div>
Dies ist die beste Option, wenn Sie eine ansprechende Layout wollen würde, würde ich nicht empfehlen Schwimmer in bestimmten Fällen ist in Ordnung schweben zu verwenden. aber in den meisten Fällen vermeiden wir Kelle, da es eine ganz auf die Zahl der Dinge beeinflussen, wenn Sie Cross-Browser-Test tun.
Hope, das hilft:)
eigentlich ist es ganz einfach, wenn Sie wissen, wie es zu tun:
<section data-speed='.618' data-type='background' style='background: url(someUrl)
top center no-repeat fixed; width: 100%; height: 40vw;'>
<div style='width: 100%; height: 40vw;'>
</div>
</section>
ist der Trick nur das beiliegende div einstellen wie ein normales div mit Maßwerten gleichen wie der Hintergrund Maßwerten (in diesem Beispiel 100% und 40vw).
Ich löste dies mit jQuery. Bis neue CSS-Regeln für diese Art von Verhalten erlauben nativ finde ich es der beste Weg, es zu tun.
Richten Sie Ihre divs
Im Folgenden finden Sie Ihre div haben, dass Sie den Hintergrund wollen erscheinen ( „Helden“) und dann den inneren Inhalt / Text, den Sie oben auf Ihrem Hintergrundbild zu überlagern wollen ( „inneren“). Sie können (und sollten) die Inline-Stile zu Ihren Helden Klasse bewegen. Ich habe sie hier so ist es schnell und einfach zu sehen, welche Arten sind auf sie angewendet.
<div class="hero" style="background-image: url('your-image.png'); background-size: 100%; background-repeat: no-repeat; width: 100%;">
<div class="inner">overlay content</div>
</div>
Berechnen Bildseitenverhältnis
Als nächstes Ihr Seitenverhältnis für Ihr Bild berechnen, indem die Höhe des Bildes durch die Breite geteilt wird. Zum Beispiel, wenn Ihre Bildhöhe 660 und Ihre Breite beträgt 1280 Ihr Seitenverhältnis 0,5156.
Setup ein Fenster Grßenänderungsereignis jQuery Höhe zu justieren
Schließlich, fügen Sie ein Ereignis jQuery-Listener für Fenster Resize und dann Held div Höhe weg des Seitenverhältnisses und aktualisieren Sie es auf Basis berechnen. Diese Lösung typischerweise hinterlässt einen zusätzlichen Pixel an der Unterseite aufgrund unvollständigen Berechnungen des Seitenverhältnisses mit so einem fügen wir -1 auf die resultierende Größe.
$(window).on("resize", function ()
{
var aspect_ratio = .5156; /* or whatever yours is */
var new_hero_height = ($(window).width()*aspect_ratio) - 1;
$(".hero").height(new_hero_height);
}
Stellen Sie sicher, es funktioniert auf Seite laden
Sie sollten die Größe ändert Aufruf oben durchführen, wenn die Seite geladen wird die Bildgrößen zu Beginn berechnet haben. Wenn Sie das nicht tun, dann wird der Held div nicht einstellen, bis Sie die Größe des Fensters. Ich Setup eine separate Funktion, um die Größe ändern Anpassungen zu tun. Hier ist der vollständige Code verwende ich.
function updateHeroDiv()
{
var aspect_ratio = .5156; /* or whatever yours is */
var new_hero_height = ($(window).width()*aspect_ratio) - 1;
$(".hero").height(new_hero_height);
}
$(document).ready(function()
{
// calls the function on page load
updateHeroDiv();
// calls the function on window resize
$(window).on("resize", function ()
{
updateHeroDiv();
}
});
Wenn Sie ein Bild auf Photoshop, wo die Hauptschicht eine Opazität von 1 hat machen können oder so und ist im Grunde transparent, dass img im div setzen und dann das wahre Bild das Hintergrundbild machen. Stellen Sie dann die Opazität des img zu 1 und fügen Sie die Größe Dimensionen Sie wollen.
Das Bild ist so gemacht, und Sie können das unsichtbare Bild von der Seite nicht einmal ziehen, die kühl ist.
nur in dem div
style="overflow:hidden;"
