Bilder dynamisch skalieren

[burn4ever]

Bilder proportional skalieren

Hallo,
ich habe ein WordPress Theme in welchen man einstellen kann das das erste Bild eines Blog als Vorschaubild dargestellt wird.
Das möchte ich auch, der einzige Haken bei der Sach ist das diese Bild immer in der vollen Auflösung dargestellt wird und in den meisten fällen einfach viel zu groß ist.

Die Klasse (.wp-post-image) habe ich ausfindig gemacht und mit dem Parameter "max-width" und "max-height" könnte ich auch das Bild theoretisch kleiner skalieren.
Wenn ich jetzt aber bein einem hochformatigen Bild z.B. max-height:30%; max-widht:60%; angebe ,stimmt dies natürlcih nicht bei eine querformatigen Bild.

Kann ich ein Bild mittels css einfach global kleiner skalliern, so das das Seitenverhältniss vom Bild erhalten bleibt?

 

[burn4ever]

Hmmm, okay. Ich glaube ich bin einen Schritt weiter.
Im html code das Blogs wird das jeweilige Bild mit Pixelmaßen angegeben. Denke das dann das css diese Pixelmaße als Referenz nimmt.

Wenn ich die Pixelangaben (widht und height) jetzt noch irgendwie aus dem html code rausbekomme, müsste die proportionale Skalierung via css ja funktionieren.

Kenn sich jemand mit Wordpress aus ;-)

 

[threadi]

Das hat mit Wordpress weniger zu tun, viel mehr mit den Styles die Du verwendest. Wenn Du das Bild in den Originalmaßen darstellen willst, dann verzichte auf width und height, ebenso aber auch min-width, max-width, min-height und max-height.

 

[Tronjer]

Falsl die HTML-Attribute von Wordpress automatisch erzeugt werden, könntest du sie auch per JS oder jQuery zurücksetzen.

<script>
     $(document).ready(function() {
          $("img").attr({width: "", height: ""});
      });
 </script>

 

[burn4ever]

Hallo Tronjer,
das wäre eine Idee, denn die Atribute werden in der Tat automatisch gesetzt und ich weiss nicht ob man das im Template einstellen kann.
Kann ich denn mittels Javascript den img Tag auch nur für eine bestimmte Klasse (.post-entry-img) ansprechen?

 

[Tronjer]

So hier?

<script>
     $(document).ready(function() {
          if ($("img").hasClass("foo")) {
              $("img").attr({width: "", height: ""});
           }
      });
 </script>

 

[burn4ever]

Hmm,leider funktioniert das noch nicht so ganz.
Also ich habe mir ein custom.js erstellt und binde dies in mein Template ein (wird auch gefunden bzw. wenn ich in den Quellcode gucke und den Pfad lade wird das Skript auch angezeigt)
Hier der Code des custom.js:

$(document).ready(function() {
      if ($("img").hasClass("attachment-blog wp-post-image")) {
          $("img").attr({width: "", height: ""});
       }
  });

Doch leider entfernt mir das immer noch nicht die width und height Werte aus diesem tag (Klasse:attachment-blog wp-post-image):

<!-- ####### MAIN CONTAINER ####### -->
        <div class='container_wrap' id='main'>
        
            <div class='container'>    
    
                <div class='template-blog template-blog-overview content'>
                
                    <div class='box'>                
                    <div class='inner_box'>                    
        <div class='post-entry post-entry-1'>                            
                <h1 class='post-title '>
                    <a href="http://meine-url.com/einen-neuen-mann-an-board.html" rel="bookmark" title="Permanent Link: Wir haben einen neuen Mann an Board.">Wir haben einen neuen Mann an Board.</a>
                </h1>
                
                <a class='external-link preview_image_full' href='http://meine-url.com/neu.html' rel='bookmark' title='Permanent Link: Wir haben einen neuen Mann an board.'><img width="430" height="627" src="http://meine-url.com/wp-content/uploads/2012/03/Thomas.jpg" class="attachment-blog wp-post-image" alt="" title="Thomas" /></a>                
                
                <!--meta info-->
                <div class="blog-meta">
                            
............... usw.   
        </div>

Eigentlich spreche ich mit dem JavaScript doch die richtige Klasse an?!

 

[burn4ever]

Hmm,
also ich habe in meinem Theme noch ein "fullscreen-backgound" welcher auch mittels JavaScript erzeugt wird. Glaube sogar mittel JQuery.
Wenn ich das obige Script anwende ist das jpg vom fullscreen Background nicht mehr sichtbar.

Anscheinend gibt es da irgend einen Konflikt?!...

Ich weiss es ist immer schwierig Aussagenzu mache ohne den Quellcode zu sehen. Aber vielleicht hat jemand einen Ansatz für mich um der Sache auf den Grund zu gehen?

 

[burn4ever]

Leider komme ich nicht zum Ziel :-(

Ich habe folgendes JavaScript (JQuery).

jQuery(document).ready(function($){
 
    $('#header img').each(function(){
        $(this).removeAttr('width')
        $(this).removeAttr('height');
    });
 
});

Die *js Datei wird auch in die html richtig eingebunden.
Doch leider sind die Attribute im Quellcode immer noch gesetzt:

         <!-- ####### HEAD CONTAINER ####### -->             <div class='container_wrap' id='header'>         <img src="http://meine-url.de/wp-content/uploads/2011/header.jpg" alt="Header Bild" width="560" height="200">                 </div>             <!-- end container_wrap_header -->                  <!-- ####### END HEAD CONTAINER ####### -->

Eigentlich sollten die Attribute "width" und "height" jetzt aus der DOM entfernt sein,oder?