Question

我正在寻找一些CSS帮助。我正在我教会的网站上工作，我正在尝试获取我所谓的响应主题的移动版本来调整标题图像的大小。现在标题图像似乎没有调整大小，或者至少不完全。

网站：http://www.rochestertrinity.com/kids.html

我希望得到的是将标题图像缩放到任何显示尺寸的精确宽度。所以事情在桌面上看起来基本相同，但在移动设备上，用户会看到整个标题图像。我已经附上了我现在看到的以及我希望看到的内容的模拟图像。

我不是CSS专家，但我怀疑管理此代码的代码位于以下代码段之一：

＆＃13;

/* Tall Header Page */
.tall-header-page .banner-wrap {
  display: table;
  width: 100%;
  min-height: 450px;
  padding-top: 50px;
  text-align: center;
}
.tall-header-page .banner-wrap .container {
  height: 450px;
}
.tall-header-page .banner-wrap .banner h2 {
  font-size: 70px;
  padding-top: 65px;
}

＆＃13;

OR

＆＃13;

/* Banner */
.banner-wrap {
  position: relative;
  max-width: 100%;
  height: auto;
  padding: 55px 0;
  box-sizing: border-box;
  background: #ffffff url('default-bg.jpg') center center no-repeat;
  background-size: cover;
}
.banner-wrap:before {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  height: auto;
  background: rgba(0, 0, 0, 0);
  content: ' ';
}
.banner-wrap .container {
  display: table;
  overflow-y: hidden;
  height: 100%;
}
.banner-wrap .banner {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.banner-wrap .banner h2 {
  padding-bottom: 30px;
  color: #ffffff;
  word-spacing: .1em;
  text-transform: uppercase;
  font-family: 'Fjalla One', sans-serif;
  font-size: 100px;
  font-weight: normal;
  line-height: 1.1em;
}
.banner-wrap .banner p {
  padding-bottom: 40px;
  color: #ffffff;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-family: 'Lato', sans-serif;
  font-size: 24px;
  font-weight: normal;
  line-height: 1.4em;
}
.banner-wrap .banner .button-wrap {
  display: inline-block;
}
.banner-wrap .banner .wsite-button {
  text-align: center !important;
}
.banner-wrap .banner .wsite-button .wsite-button-inner {
  background: #ff8345;
  color: #ffffff !important;
}
.banner-wrap .banner .wsite-button:hover .wsite-button-inner {
  background: #e56525;
}

＆＃13;

我希望有人可以提供帮助。

谢谢！

更新2016-04-22

tall-header.html代码：

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>

<body class='tall-header-page  wsite-theme-light'>

  <div class="wrapper">
	  <div class="paris-header">
      <div class="container">
      	<label class="hamburger"><span></span></label>
      	<div class="logo">{logo}</div>
        <div class="nav desktop-nav">{menu}</div>
      </div><!-- end .container -->
	  </div><!-- end .header -->  
	        
		<div class="banner-wrap wsite-background">
			<div class="container">
				<div class="banner">
					<h2>{headline:text global="false"}</h2>
					<p>{headline-paragraph:text global="false"}</p>	
				</div>
			</div>
		</div>


		<div class="main-wrap">
	    <div class="container">
	 			<div class="content-wrap">{content}</div>
	  	</div><!-- end container -->
	  </div>

    <div class="footer-wrap">
    	<div class="container">
    		<div class="footer">{footer}</div>
    	</div><!-- end container -->
    </div><!-- end footer-wrap -->
	</div>

    <div class="nav mobile-nav">
        <label class="hamburger"><span></span></label>
        {menu}
    </div>

	<script type="text/javascript" src="/files/theme/plugins.js"></script>
	<script type="text/javascript" src="/files/theme/custom.js"></script>
</body>
</html>

＆＃13;

Answer 1

在你的kids.html中你有这个，它会覆盖你的CSS代码：

<style>
.wsite-background {background-image: url("//cdn1.editmysite.com/uploads/6/5/4/8/65485229/background-images/2036811843.jpg") !important;background-repeat: no-repeat !important;background-position: 50.00% 37.71% !important;background-size: 100% !important;background-color: transparent !important;}
body.wsite-background {background-attachment: fixed !important;}.wsite-background.wsite-custom-background{ background-size: cover !important}
</style>

删除或更改此部分代码并运行：

.wsite-background.wsite-custom-background {
    background-size: cover !important;
}

在您的CSS文件中，您有此媒体查询：媒体查询说明：http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

@media screen and (max-width: 992px) {

在媒体查询中写下以下代码：

.banner-wrap.wsite-background.wsite-custom-background{ background-size: 100% 100% !important; }

它不完美，另一种解决方案就是这样，那么你必须改变元素的高度：

.banner-wrap.wsite-background.wsite-custom-background{ background-size: 100% auto !important; }

或者这个：

.banner-wrap.wsite-background.wsite-custom-background{ background-size: contain !important; }

背景大小说明：http://www.w3schools.com/css/css3_backgrounds.asp

如何让我的图像标题调整大小？它在移动设备上被切断但在桌面上看起来很好

1 个答案: