php - 将图像放入背景图像

Question

我的 Wordpress 站点中有以下代码

HTML

    <div class="test">
            <?php if(has_category( 'update' ) || has_category( 'uncategorized' )) { ?>
                <img alt="icn" src="<?php bloginfo('template_directory'); ?>/img/logo.png"> 
            <?php } elseif(has_category( 'event' )) { ?>
                <img alt="icn" src="<?php bloginfo('template_directory'); ?>/img/logo.png"> 
            <?php } ?>  
    </div>

这会将图像放在类别名称的位置。 (类别名称“更新”= logo.png)

我的问题是我希望它们的大小响应，因为它们将被放置在响应高度 div 之上。我的想法是将它们变成“测试”div 的背景图像。我似乎无法重写 img 标签代码以将它们作为 div 的背景图像而不是仅仅放置图像本身。

编辑例子

<?php if(has_category( 'update' ) || has_category( 'uncategorized' )) { ?>
<div style="background-image:url('...');">
...

Answer 1

你有没有试过这样的事情:

<div class="test">
<?php if(has_category( 'update' ) || has_category( 'uncategorized' )) { ?>
  <div class="bg-image" style="background-image:url('<?php bloginfo('template_directory'); ?>/img/logo.png');">
<?php } elseif(has_category( 'event' )) { ?>
  <div class="bg-image" style="background-image:url('<?php bloginfo('template_directory'); ?>/img/logo.png');">
<?php } else { ?>
  <div class="bg-image">
<?php } ?>
... Content in div, if necessary ...
</div>
</div>

或者，让它更干净一些:

<?php 
  $testStyle = "";
  if(has_category( 'update' ) || has_category( 'uncategorized' )) {
    $testStyle = "style=\"background-image:url('".get_bloginfo('template_directory')."/img/logo.png')\"";
  } elseif(has_category( 'event' )) {
    $testStyle = "style=\"background-image:url('".get_bloginfo('template_directory')."/img/logo.png')\"";
  }
?>
<div class="test">
  <div class="bg-image" <?php echo $testStyle; ?>></div>
</div>

<style type="text/css">
  .bg-image {
    width:100%;
    min-width:300px;
    height:100px;
    background-size:cover;
  }
</style>

请注意，如果 .bg-image div 中没有任何内容，您需要添加一些 CSS 使其“可见”:至少要有高度和宽度。

另外，考虑使用 get_template_directory_uri()，而不是 get_bloginfo('template_directory')。