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>

这会将图像放在类别名称的位置。（类别名称'update'= logo.png）

我的问题是我希望他们的尺寸反应灵敏，因为他们将被置于一个响应高度div。我的想法是将它们变成'test'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以使其显示＆＃34;可见＆＃34;：最小高度和宽度。

此外，请考虑使用get_bloginfo('template_directory')。

，而不是get_template_directory_uri()

把图像放到背景图像中

1 个答案: