Bildgröße ändern – Seitenverhältnis beibehalten – ohne Hintergrundbild

Lesezeit: 6 Minuten

Benutzer-Avatar
Shaun Taylor

Ich versuche, den auf dieser Seite gezeigten Effekt zu erzielen:

http://fofwebdesign.co.uk/template/_testing/scale-img/target-ratio-resize.htm

ABER diese Seite verwendet ein Hintergrundbild für ein div. Ich kann das Hintergrundbild nicht verwenden, da sich das Bild in WordPress befindet und dynamisch mit dem folgenden Code eingefügt wird:

<div class="featured-image">
   <?php the_post_thumbnail(); ?>
</div>

Also habe ich den gleichen Ansatz ausprobiert und die folgenden Dinge versucht, um das Bild als Hintergrundbild einzufügen:

.featured-image {
  max-width: 960px;
  /* actual img width */
  max-height: 150px;
  /* actual img height */*
  height: 150px;
  /* actual img height - IE7 */
  background-image: <?php the_post_thumbnail(); ?>;
  background-size: cover;
  background-position: center;
}

und mit diesem:

background-image: url(<?php the_post_thumbnail(); ?>);

Leider kann ich es nicht zum Laufen bringen – ich bin mir nicht einmal sicher, ob ich PHP in einem CSS-Dokument verwenden kann …

Also suche ich nach einer Möglichkeit, diese Bildgröße nur in der folgenden Klasse zu ändern, ohne ein Hintergrundbild zu verwenden …

<div class="featured-image">
   <?php the_post_thumbnail(); ?>
</div>

Jede Hilfe wäre sehr willkommen – ich weiß nicht einmal, ob ich richtig darüber nachdenke oder etwas übersehe – Danke!

Beispiel für das, was ich hier zu erreichen versuche:

Geben Sie hier die Bildbeschreibung ein

  • Innerhalb der div. Was wird im DOM nach läuft?

    – Gezzasa

    30. März 2017 um 10:04 Uhr

  • – Shaun Taylor

    30. März 2017 um 10:08 Uhr

  • Nicht 100% sicher, was das DOM ist – aber es gibt Folgendes aus:

    – Shaun Taylor

    30. März 2017 um 10:09 Uhr

  • Genau das, was ich sehen musste 🙂 Das ist aber ein RIESIGES Bild. Ich werde versuchen, etwas mit einem IMG-Tag in einem DIV herauszufinden. DOM-Laienbegriff, im Grunde der Quellcode Ihrer Seite. Eigentlich ist es ein bisschen mehr als das. Es schadet nicht, sich darüber zu informieren. Hilft Ihnen auch, HTML besser zu verstehen. Mir hat es jedenfalls geholfen.

    – Gezzasa

    30. März 2017 um 10:12 Uhr


  • Ich werde das DOM auf jeden Fall untersuchen! 🙂 Vielen Dank

    – Shaun Taylor

    30. März 2017 um 10:15 Uhr

Benutzer-Avatar
Rehan

Ich hoffe, Sie verwenden Bootstrap, verwenden Sie das Bild nicht als Hintergrund, sondern verwenden Sie es wie beim richtigen <img> tag und hinzufügen img-fluid und d-block Klasse zum Image-Tag.

  • Ich benutze Bootstrap! Ich werde das ausprobieren 🙂

    – Shaun Taylor

    30. März 2017 um 10:06 Uhr

  • lass mich die Ausgabe wissen.

    – Reha

    30. März 2017 um 10:07 Uhr

  • Ich habe das versucht und es scheint nicht zu funktionieren – hier ist die Seite, auf der es ausgegeben wird new.leicterymca.co.uk/youth-community/support-us/…

    – Shaun Taylor

    30. März 2017 um 10:14 Uhr

  • Für mich sieht es gut aus. Die Größe wird ohne Probleme korrekt angepasst. Versuchen Sie, Ihren Cache zu leeren, und aktualisieren Sie die Seite.

    – Reha

    30. März 2017 um 10:15 Uhr


  • Es funktioniert nicht so, wie das von mir bereitgestellte Beispiel funktioniert

    – Shaun Taylor

    30. März 2017 um 10:16 Uhr

Benutzer-Avatar
Deepak Yadav

Um den gewünschten Effekt zu erzielen, gaben sie a padding-top Eigentum an die background-image Wrapper-Klasse. Und beschränkte das Bild auf a max-height größer wird es also nicht. Rest war alles CSS.

So wie du es wolltest dynamisch imagejetzt können Sie die ändern style Tag-Wert mithilfe Ihres Back-End-Codes

.section {
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  max-height: 150px;
  /* restricted image height */
}

.section:before {
  content: '';
  display: block;
  width: 100%;
  padding-top: 33.333%;
  /* this is not as per formula, but as a custom aspect ratio */
}
<div class="section" style="background-image: url('http://fofwebdesign.co.uk/template/_testing/scale-img/students.jpg')">


</div>

<h1>When you want to keep the aspect ratio in background images use below formula</h1>
<code>((image height * 100%) / image width)</code>

  • Ich kann sehen, wie sie es gemacht haben – aber das funktioniert nicht, weil ich brauche, dass das Bild (Bild-URL) dynamisch ist.

    – Shaun Taylor

    30. März 2017 um 20:25 Uhr

  • Geben Sie Ihr Bild-Tag ein style Schild. Ich werde meinen Code für Sie ändern

    – Deepak Yadav

    31. März 2017 um 4:58 Uhr

Benutzer-Avatar
Gezzasa

Es gibt wahrscheinlich einen einfacheren Weg, aber die Verwendung von Jquery reicht aus. Glauben Sie nicht, dass Sie mein CSS wirklich brauchen, abgesehen von der position:relative für das Bild.

https://jsfiddle.net/ny746vLx/2/ (Nicht WordPress)

Jquery wie folgt:

$(".featured-image>img").each(function(i, img) {
    $(img).css({
        left: ($(img).parent().width() - $(img).width()) / 2
    });
});

https://jsfiddle.net/ny746vLx/4/ (WordPress)

;(function($){
    imageChange = function(){
        $(".featured-image>img").each(function(i, img) {
        $(img).css({
            left: ($(img).parent().width() - $(img).width()) / 2
        });
    });
}
    $(window).resize(imageChange); 
})(jQuery);

imageChange();

Dadurch wird das Bild physisch so weit nach links verschoben, dass es zentriert werden kann.

Der jQuery-Selektor „>“ bedeutet, dass er alle img-Tags direkt nach dem .imageContainer-Div anvisiert. Sie können diese Deklarationen auch in Ihrem CSS verwenden.

BEARBEITEN: Ich habe die Klassen verwendet, die Sie oben gedruckt haben. Denken Sie nicht, dass Sie etwas von der Geige ändern müssen. Denken Sie daran, position:relative zu Ihrem CSS für das Bild hinzuzufügen.

EDIT2: Ich habe eine weitere Geige hinzugefügt, die (hoffentlich) mit WordPress funktioniert. jQuery hat einige Konflikte damit. Es gibt einfachere Wege, aber ich bin wirklich nicht vertraut mit Konflikten in jQuery.

  • Vielen Dank für dieses Gezzasa – ich werde es ausprobieren und sehen, ob es für mich funktioniert

    – Shaun Taylor

    30. März 2017 um 13:21 Uhr

  • Hallo – Das scheint nicht wirklich zu funktionieren, fürchte ich – Hier ist, was ich bekomme: new.leicterymca.co.uk/theatre/get-creative/exhibit Es schrumpft immer noch die Höhe des Bildes und die Ränder haften immer noch am Rand … Die Hauptsache ist, sicherzustellen, dass das Bild größer (Höhe) ist als derzeit auf dem Handy 🙂 Ich habe meine Frage mit einem Bildschirmmodell aktualisiert zu

    – Shaun Taylor

    30. März 2017 um 17:24 Uhr


  • Es klappt :). Normale jQuery-Konflikte mit WordPress. Korrigiert den Code in der zweiten Geige.

    – Gezzasa

    30. März 2017 um 19:02 Uhr

Benutzer-Avatar
netscope234

Versuchen Sie es mit Inline CSS um es in Ihrem zu erreichen HTML Vorlage so:

<div 
    class="featured-image" 
    style="background-image:url(<?php the_post_thumbnail_url('full'); ?>);">
</div>

Dann benutze CSS um die anzuzeigen image richtig:

.featured-image{
   display:inline-block; /** or block, whichever suits your design **/
   background-size:cover;
   background-repeat:no-repeat;
}

Mit diesem Ansatz können Sie sogar mehr Elemente auf dem Bild innerhalb des div-Bereichs „featured-image“ anzeigen lassen.

Ich habe gerade diese Antwort aktualisiert, um das Miniaturbild des Beitrags auszugeben url statt mit der Vorgabe img Schild.

Es muss get_the_post_thumbnail_url sein.

<?php if (have_posts()): while (have_posts()) : the_post(); ?>
    <div class="featured-image" style="background-image:url(<?php echo get_the_post_thumbnail_url('full');?>);"></div>
<?php endwhile; endif; ?>

.featured-image {
background-size: cover;
background-position: center;
}

1226640cookie-checkBildgröße ändern – Seitenverhältnis beibehalten – ohne Hintergrundbild

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

Privacy policy