hintergrund Bild mit 100% Breite

Wie wir alle wissen, schaffen wir eine ansprechende Bild mit 100% des übergeordneten Breite und Höhe je nach Verhältnis mit dem folgenden code. Jedoch, ich möchte den gleichen Effekt erzielen, indem man es als Hintergrundbild verwenden background-image CSS.

Es scheint, dass ich bin nicht in der Lage zu finden keine Lösung dafür.

HTML:

<div style="margin: 0 20px;">
	<div style="width: 100%">
	    <img style="width: 100%" src="http://www.greycloaktech.com/wp-content/uploads/2015/07/url-small.jpg">
	</div>
</div>

Es scheint, dass eine Menge gegeben haben, die Antwort zu background: contain und background: cover und es funktioniert nicht. Ich habe ein code-snippet wie folgt für eine bessere Klärung.

Regeln:

1) Höhe der div-Element nicht angegeben werden.

2) background CSS verwendet werden soll (und dies ist, warum ich es als hintergrund-Bild).

3) Hintergrund Bild soll die Höhe automatisch skalieren entsprechend der Breite.

CSS:

.bg-image {
  width: 100%;
  background: url('http://www.greycloaktech.com/wp-content/uploads/2015/07/url-small.jpg') no-repeat;
}

HTML:

<div style="margin: 0 20px;">
    	<div class="bg-image">
 
    	</div>
    </div>

Sie suchen background-size.
Versuchen Sie so etwas wie background-size: cover;, das Bild füllt die gesamte Fläche von Ihren div.
weder hintergrund noch Größe Abdeckung passt mein Bedürfnis
wie @SLaks sagte, verwenden Sie background-size Eigenschaft
Ich denke, das missing link ist hier, dass das div hat keine Höhe. In der Erwägung, dass ein Bild erweitern die div, um es zu passen in der Höhe, ein background-image wird nicht für jede Höhe der div. Wenn Sie verwenden möchten background-size müssen Sie angeben, eine Höhe, auf der Sie Ihre div-oder Inhalt im es, um es zu erweitern.
Warum sind Sie der Verknüpfung ein JSFiddle, wenn Sie eingebettet ist mit dem code?
Duplizieren - stackoverflow.com/questions/600743/...

InformationsquelleAutor desmondlee | 2016-10-19

css css3

0

Müssen Sie das innere div füllen Sie das übergeordnete div - daher die Breite und Höhe 100%. Dann setzen Sie einfach die hintergrund-Größe zu 100% für jeden.
```
<div style="height:300px; width:300px;">
    <div id="bg">
    </div>
</div>

<style>
    #bg { 
        width: 100%;
        height:100%;
        background-size:100% 100%;
        background-image:url('http://www.greycloaktech.com/wp-content/uploads/2015/07/url-small.jpg');
    }
</style>
```
Beispiel jsfiddle hier
- Er sagte, dass er tun will, um diese ohne Angabe der Höhe.
- der einzige Weg, diese Frage macht Sinn, wenn der übergeordnete div hat eine Höhe - Nein Höhe = keine hintergrund-cos-es wäre nicht sichtbaren Bereich.. ich habe 300px als ein Beispiel.
InformationsquelleAutor hairmot

Legen Sie die Polsterung des Bildes oder des div zu 100% wie dieses:

.bg-image{
    background: url('http://www.greycloaktech.com/wp-content/uploads/2015/07/url-small.jpg')  no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding:100%;

 }

InformationsquelleAutor Chüngel

0

Ich eine andere Lösung gefunden, die die Rede in hier. Sie können dies tun, indem Sie die codes wie unten.

HTML
```
<div id="wrapper">
    <img src="http://www.greycloaktech.com/wp-content/uploads/2015/07/url-small.jpg" />
</div>
```
CSS
```
#wrapper {
   background: url(http://www.greycloaktech.com/wp-content/uploads/2015/07/url-small.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#wrapper > img {
  visibility: hidden;
}
```
Indem Sie dies tun, müssen Sie nicht angeben, eine Feste Höhe. Die Höhe der div ist gleich der Höhe des tatsächlichen Bildes.

Hier ist die aktualisierte version des Codes:

CSS:
```
#wrapper {
   background: url(http://www.greycloaktech.com/wp-content/uploads/2015/07/url-small.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#wrapper > img {
  visibility: hidden;
}
```
HTML:
```
<div id="wrapper">
	<img src="http://www.greycloaktech.com/wp-content/uploads/2015/07/url-small.jpg" />
</div>
```
- Gut, ich sollte erwähnen, dass ich erreichen möchte, die über die Verwendung background-image ohne Angabe der Höhe der container ...
- Wenn Sie nicht wollen, geben Sie eine Höhe für das div, oder fügen Sie einen beliebigen Inhalt haben, was ist Ihr Grund für die nicht-Verwendung <img> in den ersten Platz?
- code intuitive Zweck. Ich möchte hinzufügen, text über dem Bild und zentrieren es. Es könnte getan werden, ohne mit hintergrund Bild mit einer absoluten Positionierung, aber es wird einfach nicht gut Aussehen, um mich, wie Sie es schaffen langatmig html-und css-code
- Setzen Sie Ihren Löffel nach unten und Fragen uns, wie Sie Ihre Suppe Essen mit einer Gabel. Sie haben gebeten, Ihre ursprüngliche Frage falsch verstanden. Sie sollten sich Fragen, "wie Zentriere ich ein Bild unter den text", nicht "wie vermeide ich die Verwendung von <img>". Es gibt ein Dutzend Möglichkeiten, um text mittig über dem Bild, ohne die Verwendung position: absolute; oder background-image.
InformationsquelleAutor Kaan Burak Sener

es ist sehr einfach, Sie müssen nur hinzufügen, somme Eigenschaften der css-Klasse 😉
ich hoffe, dass ist das, was du suchst

CSS:

.bg-image {
  width: 100%;
  background: url('http://www.greycloaktech.com/wp-content/uploads/2015/07/url-small.jpg');
  background-repeat: no-repeat;
  
  background-position: 50% 50%;/*  */
  background-size: cover; 
  height: 43.5625rem;
  left:0;
  right:0;
  top:0;
  bottom:0;
  position:fixed;  
}

HTML:

<div style="margin: 0 20px;">
    	<div class="bg-image">
 
    	</div>
    </div>

InformationsquelleAutor Smaillns

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.