zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Image Crop mit CSS

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 26.09.2008, 12:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.09.2008
Beiträge: 2
vielfrager befindet sich auf einem aufstrebenden Ast
Standard Image Crop mit CSS

Hallo liebe CSS-Experten,

leider hat die Suche diesmal nichts gebracht, daher meine Frage, die für viele leicht sein sollte (ich bin CSS Asfänger und daher kann ich das nicht lösen) :

Ich habe ein Wordpress-Blog, in dass ich Bilder auf die Startseite automatisch einsetzen lasse. Diese Bilder werden auf eine bestimmte Größe gezogen per Stylesheet, z.B. so:

Code:
.frontcatstory {
width: 51px;
height:51px;
 }
die Bilder werden dann per PHP aufgerufen:
PHP-Code:
<a href="<?php the_permalink() ?>" rel="bookmark" class="title"><?php echo get_the_image(array('Thumbnail'),'frontcatstory'); ?></a>
Die Bilder bekommen zwar die exakte Größe, sind logischerweise aber verzerrt, da die Originalbilder unterschiedliche Größen haben. Ideal wäre es daher, wenn ich per CSS die Bilder auf die Größe croppen könnte. Geht das?

Danke und Gruß
Vielfrager
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 26.09.2008, 12:38
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Ich würde getimagesize() nutzen und die CSS-Deklarationen von width und height weglassen. Oder muss es unbedingt immer 51x51px sein? Dann wäre background-image eine einfache Lösung, oder es bleibt ein img und das Elternelement bekommt overflow: hidden;.

Der Vollständigkeit halber sei noch clip erwähnt, ist allerdings etwas "eigen" und wird auch vom IE < 6 nicht unterstützt.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)

Geändert von heiko_rs (26.09.2008 um 12:53 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 26.09.2008, 13:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.09.2008
Beiträge: 2
vielfrager befindet sich auf einem aufstrebenden Ast
Standard

Hallo,
Danke für die schnelle Antwort. Ich habe Deine Ansätze mit Google-Hilfe versucht zu verstehen. Funktioniert so aber leider bei mir nicht.


Code:
.fronttopstory {
width: 574px;
height:178px;
overflow: hidden;
	}

Müsste ich die fronttopstory als <div class="... definieren?

Hängt das damit zusammen? Ich spreche den Code oben nur so an:

Code:
  
<div class="feature clearfloat" id="lead">
  
   <?php 
// this is where the Lead Story module begins   
   query_posts('showposts=1&cat=1'); ?>
      <?php while (have_posts()) : the_post(); ?>
<!-- Hier kommt das bild automatisch durch plugin, name fronttopstory --!>
<a href="<?php the_permalink() ?>" rel="bookmark" class="title"><?php echo get_the_image(array('Thumbnail'),'fronttopstory'); ?></a>

    <h3>
	<?php 
	// this is where the name of the Lead Story category gets printed	  
	wp_list_categories('include=1&title_li=&style=none'); ?></h3>
    <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>" class="title">
    <?php 
// this is where the title of the Lead Story gets printed	  
	the_title(); ?>
    </a>
    <?php 
// this is where the excerpt of the Lead Story gets printed	  
	the_excerpt(); ?>
    {<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">Weiterlesen&raquo;</a>}
    <?php endwhile; ?>
  </div><!--END FEATURE-->
Reicht es in der Form "nur" beim Image-Echo Befehl die .fronttpstory in der css anzusprechen, oder muss die DIV entsprechend geändert werden?
Danke und Gruß
Vielfrager
Mit Zitat antworten
  #4 (permalink)  
Alt 26.09.2008, 13:39
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Wenn es immer 51x51px sein soll, braucht img ein umgebendes Element mit exakt diesen Abmessungen - z.B. ein span mit display: block;. Ungeparstes PHP bringt hier übrigens nix.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
Antwort

Stichwörter
css, image, image crop

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Doctype und CSS Problem tech CSS 3 29.05.2009 21:16
mouseover problem Basti82 Javascript & Ajax 0 13.10.2008 15:17
Imagemap Zugriff bei einer Gallery Sarah14 Javascript & Ajax 3 12.11.2007 15:06
Mozilla ignoriert externes css DarkWanderer CSS 9 22.09.2005 12:39
Image darstellung nur mit CSS karschten CSS 8 19.06.2005 00:32


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:44 Uhr.