Question

尝试在css中添加背景图像并使其在div中响应！每次我调整浏览器大小时，图像都保持相同的大小。不确定我做错了什么。设置了 JS FIDDLE

这是我的代码......

HTML

<div id="logo" class="col-md-8">
<a href="<?php echo esc_url(home_url('/')); ?>" title="WINNING POST BREWERY & PUB">WINNING POST BREWERY & PUB</a>
</div>

CSS

#logo {
    text-align:center;
    height:auto;
    min-height:145px;
    background:rgb(212,228,239);
    background:rgba(212,228,239,.2);
    background:-moz-linear-gradient(top,rgba(212,228,239,.2)0%,rgba(134,174,204,.8)100%);
    background:-webkit-gradient(left top,left bottom,color-stop(0%,rgba(212,228,239,.2)),color-stop(100%,rgba(134,174,204,.8)));
    background:-webkit-linear-gradient(top,rgba(212,228,239,.2)0%,rgba(134,174,204,.8)100%);
    background:-ms-linear-gradient(top,rgba(212,228,239,.2)0%,rgba(134,174,204,.8)100%);
    background:-o-linear-gradient(top,rgba(212,228,239,.2)0%,rgba(134,174,204,.8)100%);
    background:linear-gradient(top,rgba(212,228,239,.2)0%,rgba(134,174,204,.8)100%);
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    -ms-border-radius:8px;
    -o-border-radius:8px;
    border-radius:8px;
    border:1px solid #0D4364;
    box-shadow:0 1px 1px #79C6FF;
    padding:6px;
}
#logo a{
    background-image:url('ASSETS/logo.png');
    background-position:0 0;
    background-repeat:no-repeat;
    margin:0 auto;
    display:block;
    width:100%;
    height:auto;
    text-indent:-9999px;
    background-size:cover
}

Answer 1

尝试设置 background-size:100% 100%` instead of `cover`

#logo {
	text-align:center;
	height:auto;
	min-height:145px;
    width:80%;
	background:rgb(212,228,239);
	background:rgba(212,228,239,.2);
	background:-moz-linear-gradient(top,rgba(212,228,239,.2)0%,rgba(134,174,204,.8)100%);
	background:-webkit-gradient(left top,left bottom,color-stop(0%,rgba(212,228,239,.2)),color-stop(100%,rgba(134,174,204,.8)));
	background:-webkit-linear-gradient(top,rgba(212,228,239,.2)0%,rgba(134,174,204,.8)100%);
	background:-ms-linear-gradient(top,rgba(212,228,239,.2)0%,rgba(134,174,204,.8)100%);
	background:-o-linear-gradient(top,rgba(212,228,239,.2)0%,rgba(134,174,204,.8)100%);
	background:linear-gradient(top,rgba(212,228,239,.2)0%,rgba(134,174,204,.8)100%);
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	-ms-border-radius:8px;
	-o-border-radius:8px;
	border-radius:8px;
	border:1px solid #0D4364;
	box-shadow:0 1px 1px #79C6FF;
	padding:6px;
    height:2vw;
}
#logo a{
	background-image:url('http://www.winningpostworcester.co.uk/wp-content/themes/WinningPost/ASSETS/logo.png');
	background-position:0 0;
	background-repeat:no-repeat;
	margin:0 auto;
	display:block;
	width:100%;
	height:auto;
	text-indent:-9999px;
	background-size:100% 100%;
}

<div id="logo" class="col-md-8">
    <a href="#" title="WINNING POST BREWEry">WINNING POST BREWERY & PUB</a>
</div>

Answer 2

根据您的要求，如果您想将徽标的宽度设置为100％;然后你应该使用background-size:contain;和background-position:center center;。

这样，横幅将保持其纵横比包含在父div中。

您可以根据需要更改最小高度值。请记住将它应用于链接和容器。

＆＃13;

#logo {
	text-align:center;
    width:100%;
	min-height:145px;
	background:rgb(212,228,239);
	background:rgba(212,228,239,.2);
	background:-moz-linear-gradient(top,rgba(212,228,239,.2)0%,rgba(134,174,204,.8)100%);
	background:-webkit-gradient(left top,left bottom,color-stop(0%,rgba(212,228,239,.2)),color-stop(100%,rgba(134,174,204,.8)));
	background:-webkit-linear-gradient(top,rgba(212,228,239,.2)0%,rgba(134,174,204,.8)100%);
	background:-ms-linear-gradient(top,rgba(212,228,239,.2)0%,rgba(134,174,204,.8)100%);
	background:-o-linear-gradient(top,rgba(212,228,239,.2)0%,rgba(134,174,204,.8)100%);
	background:linear-gradient(top,rgba(212,228,239,.2)0%,rgba(134,174,204,.8)100%);
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	-ms-border-radius:8px;
	-o-border-radius:8px;
	border-radius:8px;
	border:1px solid #0D4364;
	box-shadow:0 1px 1px #79C6FF;
	padding:6px;
}
#logo a{
	background-image:url('http://www.winningpostworcester.co.uk/wp-content/themes/WinningPost/ASSETS/logo.png');
	background-position:center center;
	background-repeat:no-repeat;
    min-height:145px;
	margin:0 auto;
	display:inline-block;
	width:100%;
	height:auto;
	text-indent:-9999px;
	background-size:contain;
    text-align:center;
}

＆＃13;

<div id="logo" class="col-md-8">
    <a href="#" title="WINNING POST BREWEry">WINNING POST BREWERY & PUB</a>
</div>

＆＃13;

响应图像CSS

2 个答案: