background-size enthalten, aber nicht vergrößern

Lesezeit: 5 Minuten

Benutzer-Avatar
MegaHit

Ich habe mein Hintergrundbild auf eingestellt contain:

.el {
    background: url(path/to/img.jpg) no-repeat center center;
    background-size: contain;
}

Aber das vergrößert das Bild. Ich möchte, dass das Bild niemals größer als seine nativen Abmessungen ist und nur verkleinert wird, wenn es nicht in seine native Auflösung passt.

Hier ist eine Demo: http://jsfiddle.net/6W3yh/


Ich suche nach einer Lösung nur in CSS.
Bitte kein JavaScript.

  • Eine Alternative besteht darin, CSS-Medienabfragen zu verwenden, um die Abmessungen Ihres Bildes basierend auf verschiedenen Bildschirmgrößen anzupassen, die relativ zu Ihrer Bildgröße sind.

    – Klewis

    12. März 2013 um 14:18 Uhr


  • @blachawk – Ich verstehe das, aber ich versuche das aus mehreren Gründen zu vermeiden, nicht zuletzt, weil ich meine Medienabfragen aktualisieren muss, wenn das Bild (Abmessungen) aktualisiert wird 🙁

    – Megahit

    12. März 2013 um 14:20 Uhr

  • Das mag nicht wahr sein, wenn Sie sich entscheiden, mit Prozentsätzen zu experimentieren … Theoretisch sollten Ihre zukünftigen Bilder passen.

    – Klewis

    12. März 2013 um 14:25 Uhr


  • @blachawk – Ich habe es versucht, aber ich konnte es nicht zum Laufen bringen. Können Sie mir zeigen, wie es gemacht wird? Ich habe meiner Frage eine Geige hinzugefügt.

    – Megahit

    12. März 2013 um 14:27 Uhr

  • Verwenden max-width:(your max img width) zu deinem .el

    – otinanai

    12. März 2013 um 14:30 Uhr

Benutzer-Avatar
Rechnung

Leider ist das, was Sie tun möchten, in CSS nicht möglich.

Am besten stellen Sie die Hintergrundgröße mit Javascript ein. Wenn Sie jedoch möchten, dass das Bild verkleinert wird, wenn der Container kleiner ist, müssen Sie in der Lage sein, die natürliche Höhe des Bilds abzurufen.

if ($('.el').height() < imageHeight) {
  $('.el').css('background-size', 'contain');
}
else {
  $('.el').css('background-size', 'auto');
}

  • Ich weiß, wie man es in JS macht. Ich suche eine reine CSS-Lösung. Ist das nicht ein allgemeines Bedürfnis? Warum wird dies nicht in CSS3 behandelt background-size Eigentum?

    – Megahit

    12. März 2013 um 18:56 Uhr

  • Soweit ich weiß, gibt es dafür keine reine CSS-Lösung. w3schools.com/cssref/css3_pr_background-size.asp

    – Rechnung

    13. März 2013 um 10:54 Uhr


  • @MegaHit Ich stimme zu, dass dies sehr nützlich wäre, aber mit CSS, wie es 2014 vorliegt, ist es unmöglich. Javascript oder Bust, fürchte ich.

    – aaaidan

    19. September 2014 um 3:23 Uhr

Benutzer-Avatar
ktorat

Du könntest benutzen Onkel Daves alte Padded-Box-Technik dafür. Hier ist eine Geige, die es in Aktion zeigt.

div {
    background: url(http://cdn4.iconfinder.com/data/icons/silent_night_icons/128/santa.png) no-repeat center center;
    background-size: 100%;

    width: 100%;
    max-width: 128px;
    height: 0;
    padding-bottom: 100%; /* (Image Height / Image Width) * 100%; */
}

Das einzige Problem ist, dass Sie die Breite Ihres Bildes kennen müssen, damit dies funktioniert. Wenn Sie einen CSS-Präprozessor wie Compass verwenden, können Sie diese Arbeit auf den Prozessor auslagern, anstatt sie manuell zu erledigen. Informationen dazu finden Sie hier.

  • Ich möchte meinen Container nicht nach dem Bild skalieren. Ich möchte, dass das Bild mit dem Container skaliert wird.

    – Megahit

    13. März 2013 um 5:03 Uhr

  • Ich bin mir nicht sicher, ob ich voll und ganz dem folge, was Sie wollen. Entspricht das eher deiner Meinung? Geige. Wenn Sie ein img anstelle eines CSS-Hintergrunds verwenden, können Sie das innere div weglassen.

    – kpeatt

    13. März 2013 um 17:22 Uhr

  • @kpeatt die Lösung in deinem Kommentar war genau das, wonach ich gesucht habe und löst das Problem ziemlich gut 🙂

    – Ria Weyprecht

    30. September 2015 um 13:27 Uhr

Sie können diesen JQuery-Fix ​​verwenden:

$('.target').each(function() {
        if ($(this).css('background-size') == 'contain') {
            var img = new Image;
            var currObj = $(this);
            img.src = currObj.css('background-image').replace(/url\(|\)$/ig, "").replace(/"/g, "").replace(/'/g, "");
            img.onload = function(){
                if (img.width < currObj.width() && img.height < currObj.height()) {
                    currObj.css('background-size', 'auto auto');
                }
            }
        }
    }); 

  • Willkommen bei SO! Versuchen Sie, Ihre Antworten näher zu erläutern. Auf der Seite „Antworten“ finden Sie Hilfe zur Verbesserung Ihrer Antwort.

    – Wahnsinn

    6. August 2015 um 22:12 Uhr

Um die natürliche Breite / Höhe zu erhalten, können Sie das Hintergrundbild in den HTML-Code einfügen und es ausblenden und dann die Bildbreite / -höhe mit dem Skript abrufen.

HTML:

<div></div>
<img id="background" style="display: none" src="http://cdn4.iconfinder.com/data/icons/silent_night_icons/128/santa.png" />

JS:

var backgroundSize = $('#background').css('width');

Ich verwende zwei Ansätze:

1 – Objektanpassung

Dies hat eine gute Browserunterstützung: https://caniuse.com/#feat=object-fit

.container {
  position: relative;
  width: 200px;
  height: 200px;
  /* Just for style */
  display: inline-block;
  background: rgba(0,0,0,0.2);
  margin: 10px;
}
.container img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}
<div class="container">
  <img src="https://picsum.photos/300/200">
</div>

<div class="container">
  <img src="https://picsum.photos/200/300">
</div>

<div class="container">
  <img src="https://picsum.photos/100/100">
</div>

2 – Positionieren und transformieren

Wenn Sie auf ältere Browser abzielen müssen, funktioniert dies genauso gut, ohne dass Ihr Markup geändert wird

.container {
  position: relative;
  width: 200px;
  height: 200px;
  /* Just for style */
  display: inline-block;
  background: rgba(0,0,0,0.2);
  margin: 10px;
}
.container img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
}
<div class="container">
  <img src="https://picsum.photos/300/200">
</div>

<div class="container">
  <img src="https://picsum.photos/200/300">
</div>

<div class="container">
  <img src="https://picsum.photos/100/100">
</div>

Benutzer-Avatar
sehen

CSS-Lösung: Sie müssen die Höhe und Breite des Bildes kennen.

@media screen and (max-width: 640px) and (max-height: 480px) {
    div {
        background-size: contain !important;
    }
} 

div {
    background: #000 url('https://i.imgur.com/someimage.jpg') no-repeat center center;
    background-size: 640px 480px;
}

Wo die Bild-URL ist https://i.imgur.com/someimage.jpg und die Breite und Höhe des Bildes ist 640px und 480px beziehungsweise.

1179500cookie-checkbackground-size enthalten, aber nicht vergrößern

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy