时间戳

首页 > 解决方案 > WordPress 查询图像大小

css - WordPress 查询图像大小

问题描述

如何在我的教堂网站滑块的查询中使滑块框框架更大。$width 和 $height 只改变图像的大小。滑块上的图像被切掉 - 我想显示与框架一样大的图像滑块框。或者我如何裁剪图像以使其不会被切断 - 要查看完整图像大小，请单击图像以查看帖子。

我想让滑块框的宽度为 600，高度为 300，但框底部的字母不断改变位置，看起来不正确。

网站：brbconline.org

<div id="featuredContainer">
    <div id="featured">
        <ul>
            <?php query_posts( 'posts_per_page=5' ); ?>
        <?php $recentPosts = new WP_Query(); $recentPosts->query('category_name='. $church_slider .'&showposts= 7'.''); while ($recentPosts->have_posts()) : $recentPosts->the_post(); ?>
        <?php $image = ""; $first_image = $wpdb->get_results("SELECT guid FROM $wpdb->posts WHERE post_parent = '$post->ID' "."AND post_type = 'attachment' ORDER BY `post_date` ASC LIMIT 0,1"); if ($first_image) {$image = $first_image[0]->guid;} ?>
         <?php $width = "570"; $height = "255"; ?>
            <li>
                <h2><a href="<?php the_permalink() ?>" class="tooltip" title="Continue Reading"><?php the_title(); ?></a></h2>
                <a href="<?php the_permalink() ?>" class="tooltip" title="Continue Reading"><img class="featimg" src="<?php bloginfo('template_directory'); ?>/timthumb.php?src=<?php echo $image ?>&w=<?php echo $width ?>&h=<?php echo $height ?>&zc=1" alt="<?php the_title(); ?>" height="<?php echo $height ?>" width="<?php echo $width ?>" /></a>
            </li>
            <?php endwhile; ?> 
        </ul> 
    </div>
</div>  <!--end featuredContainer-->

CSS在这里：

   /* -----FEATURED STUFF----- */
#featuredContainer {margin:0 0 40px; padding: 0; width:560px;position:relative; height:290px; overflow:hidden; border: 1px solid #666; border-bottom:none;}
#featured {overflow:hidden; width:560px; height:290px; position:relative;}
#featured ul, #featured li{margin:0;padding:0;list-style:none; position:relative; overflow:hidden; width:560px; height:290px;}
#featured li h2 a {position: absolute; bottom:0; left: 0; line-height: 36px; padding:0; text-align:center; font-size: 12px; color: #fff; background-repeat: repeat-x; background-position: left center; width: 100%; font-weight:bold;}
#featured li h2 a {color:#fff;}
span#prevBtn a,
span#prevBtn a:link,
span#prevBtn a:visited,
span#nextBtn a,
span#nextBtn a:link,
span#nextBtn a:visited {
    margin: 0; 
    font-weight:bold;
    cursor: pointer; 
    position: absolute; 
    font-size:12px; 
    padding:8px 15px; 
    background: #6a3b14 url('images/buttonback.jpg') repeat-x center;   
    line-height:20px; 
    color:#fff;
    font-weight:bold;
    outline: none;
}
span#prevBtn a {bottom:0px; left:0px; border-right:1px solid #89642D;}
span#nextBtn a {bottom:0px; right:0px;  border-left:1px solid #89642D;}
span#prevBtn a:hover, span#nextBtn a:hover {text-decoration: none; background: #6a3b14 url('images/buttonback.jpg') repeat-x top;}
span#prevBtn a:active, span#nextBtn a:active {background: #6a3b14 url('images/buttonback.jpg') repeat-x bottom;}

标签： csswordpress

解决方案

推荐阅读