Question

当我将图像作为背景切割图像时，这是一个例子： http://midanew.wpengine.com/

看第一个大图像（尖叫的人），现在向下滚动，直到你只用手看到相同的图片，因为图片被剪切了。这两张照片是一样的。为什么秒图片被剪切，如何让图片看起来一样？

第一张图片的代码：

<div class="col-sm-8">
            <?php 
            $attachment_id = get_field('rectangular_image');
            $main_post_img = wp_get_attachment_image_src( $attachment_id, 'full' );
            if ( $attachment_id ){ ?>
                <img src="<?php echo $main_post_img[0] ?>">
            <?php 
            }else{ ?>
                <a href=<?php the_permalink()?>><?php the_post_thumbnail(); ?> </a>
            <?php }?>
</div>

第二个：

   $first_special_img_id = get_field('rectangular_image');
   if ( $first_special_img_id )
       $first_special_img = wp_get_attachment_image_src( $first_special_img_id, 'full' );
    else 
       $first_special_img = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );
            ?>
    <a href=<?php echo esc_url(get_permalink()); ?> rel="<?php the_title();?>">
       <div class="special-project-section" style="background: url('<?php echo $first_special_img[0]; ?>')">
            <?php 
            echo '<div class="special-cat-on-img">';
            echo '<h5><div class="special-cat-name-img">' . __('Special Project', 'mida') . '</div></h5>'; ?>   
             <h6 class="speical-cat-title-img"><a href="<?php the_permalink()?>"> <?php the_title() ?> </a></h6>                
            <?php echo '</div>'; ?>
            <?php echo '<div class="special-proj-ex">' . get_the_excerpt() . '</div>'; ?>
           <div class="blue-line"></div>
       </div>
     </a>

提前致谢！

Answer 1

添加

background-size: contain;

到

行

<div class="special-project-section" style="background: url('<?php echo $first_special_img[0]; ?>')">

即，用

替换该行

<div class="special-project-section" style="background: url('<?php echo $first_special_img[0]; ?>');background-size: contain;">

在你的第二张照片中。

见下面的截图

有关background-css的详细信息，请参阅docs。

Answer 2

您拥有第二张图片的div类的css“.special-project-section”的宽度为750，高度为300.您的图像为944x415。因此将被削减。使它们看起来与css类相同。

如果您希望保持div的大小相同，请尝试将图像置于css中心，如上所述here

background: url(url) no-repeat center;

背景图像被剪切

2 个答案: