修复动态标题图像上的可见高度值

Question

我有一个Wordpress网站，用户可以选择将不同的标题图片上传到他们创建的任何特定帖子或页面。在快乐的情况下，标题图像看起来很好，因为高度不占用整个页面。但是，我想为标题图片设置一个最大可见高度值，例如350px，这样图像的其余部分就会被隐藏或“切断”＆＃39;来自后面的内容。使用css max-height属性只会使图像以丑陋的方式缩小，因为它的长度需要为100％。

我尝试将图像包装在具有固定高度的div中，然后使用overflow：隐藏在图像上，这不起作用。然后我尝试使用z-index使内容覆盖图像的溢出部分，但没有任何成功。

有关如何解决此问题的任何想法？

Answer 1

您可以使用Overflow css属性。 如果图像高度超过xx高度，图像的其余部分将被隐藏。

例如：Link

.header {
     width: 100%;
     height: 100px;
     overflow: hidden; 
}

Answer 2

如果您不限制使用img标记，则可以将图像设置为背景：

HTML

<div id="site-header" style="background-image: url('<?php header_image(); ?>')"> 
  <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">

  </a> 
</div>

CSS

设置背景大小以覆盖，使图像覆盖整个div。

#site-header{
  height:350px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
#site-header a{
  display:block;
  width:100%;
  height:100%;
}

Answer 3

我将.site-header div的高度保持为200px

Answer 4

使用您的图片作为div的背景并设置该属性：

background-size: 100%;