XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Image Crop mit CSS (http://xhtmlforum.de/showthread.php?t=53802)

vielfrager 26.09.2008 12:02

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

heiko_rs 26.09.2008 12:38

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.

vielfrager 26.09.2008 13:30

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

heiko_rs 26.09.2008 13:39

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.


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:42 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019