我正在为一个朋友使用一个非常漂亮的高级WordPress主题制作网站。我已经支付了主题费用，但设计师不愿意帮助进行定制。
该网站目前位于www.zerocarbonfood.co.uk/test/。最初该主题具有小的左对齐标志，但我的朋友喜欢这个宽度全屏的标志，我认为它更有效。问题是，现在当我在iPad或iPhone（竖屏）上查看它时，标志太大并且会弄乱页面。在主题选项中，它定义为922px宽度和168px高度。我无法在那里放置百分比值。我能在CSS中覆盖这个设置吗？
如果有任何帮助，我将不胜感激，因为我有点超纲了。
<div id="logo-container"><a href="http://www.zerocarbonfood.co.uk/test"><img src="http://www.zerocarbonfood.co.uk/test/wp-content/uploads/2013/07/wide-logo-2.png" alt="" /></a></div>
CSS
#logo-container img {
width: 100%;
height: auto;
}
尝试使用max-width: 100%; height: auto;，这应该可以正确地调整图片大小。
logo-container img {
width: 100%;
height:auto;
}
/* Resize Background*/
@media only screen and (max-width: 800px) {
#header{
width: 100%;
height: auto;
background-size: 100% auto !important;
}
}
尝试
#logo-container img {
width: 100%; !important
height: auto; !important
}
它会覆盖先前的值。
尝试使用%而不是px。这样，您的图像将随页面大小缩放。
在您的HTML中，您可以尝试类似以下的内容
<img src="logo.png" width="80%" height="80%"/>
这将随着屏幕宽度进行缩放。当然，您还希望缩放高度以保持纵横比。
顺便说一下，当我将Android手机缩小到最小时，该网站看起来很好。
如何在鼠标悬停时放大图像？
以下是示例HTML代码：
<footer>
<!-- Main Footer -->
<section class="section background-dark">
<div class="line">
<div class="margin">
<!-- Column 1 -->
<div class="s-12 m-12 l-4 margin-m-bottom-2x">
<h4 class="text-uppercase text-strong">Our Philosophy</h4>
<p class="text-size-20"><em>"Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt."</em><p>
<div class="line">
<h4 class="text-uppercase text-strong margin-top-30">About Our Company</h4>
<div class="margin">
<div class="s-12 m-12 l-4 margin-m-bottom">
<a class="image-hover-zoom" href="/"><img src="img/blog-04.jpg" alt=""></a>
</div>
<div class="s-12 m-12 l-8 margin-m-bottom">
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
<a class="text-more-info text-primary-hover" href="/">Read more</a>
</div>
</div>
</div>
</div>
<!-- Column 2 -->
<div class="s-12 m-12 l-4 margin-m-bottom-2x">
<h4 class="text-uppercase text-strong">Contact Us</h4>
<div class="line">
<div class="s-1 m-1 l-1 text-center">
<i class="icon-placepin text-primary text-size-12"></i>
</div>
<div class="s-11 m-11 l-11 margin-bottom-10">
<p><b>Adress:</b> Responsive Street 7, London, UK</p>
</div>
</div>
<div class="line">
<div class="s-1 m-1 l-1 text-center">
<i class="icon-mail text-primary text-size-12"></i>
</div>
<div class="s-11 m-11 l-11 margin-bottom-10">
<p><a href="/" class="text-primary-hover"><b>E-mail:</b> contact@sampledomain.com</a></p>
</div>
</div>
<div class="line">
<div class="s-1 m-1 l-1 text-center">
<i class="icon-smartphone text-primary text-size-12"></i>
</div>
<div class="s-11 m-11 l-11 margin-bottom-10">
<p><b>Phone:</b> 0700 000 987</p>
</div>
</div>
<div class="line">
<div class="s-1 m-1 l-1 text-center">
<i class="icon-twitter text-primary text-size-12"></i>
</div>
<div class="s-11 m-11 l-11 margin-bottom-10">
<p><a href="/" class="text-primary-hover"><b>Twitter</b></a></p>
</div>
</div>
<div class="line">
<div class="s-1 m-1 l-1 text-center">
<i class="icon-facebook text-primary text-size-12"></i>
</div>
<div class="s-11 m-11 l-11">
<p><a href="/" class="text-primary-hover"><b>Facebook</b></a></p>
</div>
</div>
</div>
<!-- Column 3 -->
<div class="s-12 m-12 l-4">
<h4 class="text-uppercase text-strong">Leave a Message</h4>
<form class="customform text-white">
<div class="line">
<div class="margin">
<div class="s-12 m-12 l-6">
<input name="email" class="required email border-radius" placeholder="Your e-mail" title="Your e-mail" type="text" />
</div>
<div class="s-12 m-12 l-6">
<input name="name" class="name border-radius" placeholder="Your name" title="Your name" type="text" />
</div>
</div>
</div>
<div class="s-12">
<textarea name="message" class="required message border-radius" placeholder="Your message" rows="3"></textarea>
</div>
<div class="s-12"><button class="submit-form button background-primary border-radius text-white" type="submit">Submit Button</button></div>
</form>
</div>
</div>
</div>
</section>
<hr class="break margin-top-bottom-0" style="border-color: rgba(0, 38, 51, 0.80);">
<!-- Bottom Footer -->
<section class="padding background-dark">
<div class="line">
<div class="s-12 l-6">
<p class="text-size-12">Copyright 2019, Vision Design - graphic zoo</p>
<p class="text-size-12">All images have been purchased from Bigstock. Do not use the images in your website.</p>
</div>
<div class="s-12 l-6">
<a class="right text-size-12" href="http://www.myresponsee.com" title="Responsee - lightweight responsive framework">Design and coding<br> by Responsee Team</a>
</div>
</div>
</section>
</footer>
这是 CSS 的一部分：
a, a:link, a:visited, a:hover, a:active {
color: #777;
}
.text-primary, .text-primary *, .primary-color-primary .text-primary, .primary-color-primary .text-primary * {
color: #49BF4C !important;
}
.text-primary-hover:hover, .primary-color-primary .text-primary-hover:hover {
color: #49BF4C !important;
}
.text-white, .text-white *, .primary-color-white .text-primary, .primary-color-white .text-primary * {
color: #fff !important;
}
.background-primary, .primary-color-primary .background-primary {
background-color: #49BF4C !important;
}
.margin-bottom-10 {
margin-bottom: 10px !important;
display: block;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
color: #000;
margin-bottom: 15px;
margin-top: 0;
}
h4, .h4 {
font-size: 1.1rem;
}
@media screen and (max-width: 768px) {
.margin-m-bottom {
margin-bottom: 1.25rem !important;
display: block;
}
}
.image-hover-zoom:hover img {
transform: scale(1.1);
}
/*SAmple*/
.section {
padding: 6rem 1.25rem;
}
.background-dark, .primary-color-dark .background-primary {
background-color: #002633 !important;
}
.background-dark, .background-dark p, a.background-dark, a.background-dark:visited, a.background-dark:link, .background-dark a, .background-dark a:link, .background-dark a:visited, .background-dark a:hover, .background-dark a:active, .primary-color-dark .background-primary, .primary-color-dark .background-primary p, .primary-color-dark a.background-primary, .primary-color-dark a.background-primary:visited, .primary-color-dark a.background-primary:link, .primary-color-dark a.background-primary:visited, .primary-color-dark .background-primary a, .primary-color-dark .background-primary a:link, .primary-color-dark .background-primary a:visited, .primary-color-dark .background-primary a:hover, .primary-color-dark .background-primary a:active {
color: #7697A2;
}
hr.break {
border: 0;
border-top: 1px solid #e5e5e5;
display: block;
margin: 40px 0;
}
.margin-top-bottom-0 {
margin-top: 0 !important;
margin-bottom: 0 !important;
display: block;
}
hr.break:after {
clear: both;
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}
.text-size-12, .text-l-size-12 {
font-size: 12px !important;
line-height: 1.4;
}
p {
color: #777;
font-size: 0.85rem;
line-height: 1.6rem;
}
.background-dark h1, .background-dark h2, .background-dark h3, .background-dark h4, .background-dark h5, .background-dark h6, .background-dark .h1, .background-dark .h2, .background-dark .h3, .background-dark .h4, .background-dark .h5, .background-dark .h6, .primary-color-dark .background-primary h1, .primary-color-dark .background-primary h2, .primary-color-dark .background-primary h3, .primary-color-dark .background-primary h4, .primary-color-dark .background-primary h5, .primary-color-dark .background-primary h6, .primary-color-dark .background-primary .h1, .primary-color-dark .background-primary .h2, .primary-color-dark .background-primary .h3, .primary-color-dark .background-primary .h4, .primary-color-dark .background-primary .h5, .primary-color-dark .background-primary .h6, .background-primary h1, .background-primary h2, .background-primary h3, .background-primary h4, .background-primary h5, .background-primary h6, .background-primary .h1, .background-primary .h2, .background-primary .h3, .background-primary .h4, .background-primary .h5, .background-primary .h6, .primary-color-primary .background-primary h1, .primary-color-primary .background-primary h2, .primary-color-primary .background-primary h3, .primary-color-primary .background-primary h4, .primary-color-primary .background-primary h5, .primary-color-primary .background-primary h6, .primary-color-primary .background-primary .h1, .primary-color-primary .background-primary .h2, .primary-color-primary .background-primary .h3, .primary-color-primary .background-primary .h4, .primary-color-primary .background-primary .h5, .primary-color-primary .background-primary .h6 {
color: #fff;
}
.text-uppercase {
text-transform: uppercase;
line-height: 1;
}
b, strong, .text-strong {
font-weight: 700;
}
h4, .h4 {
font-size: 1.1rem;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
color: #000;
margin-bottom: 15px;
margin-top: 0;
}
h1, h2, h3, h4, h5, h6 {
color: #152732;
font-weight: normal;
line-height: 1.3;
margin: 0.5rem 0;
}
h4 {
font-size: 1.4rem;
}
.text-size-20, .text-l-size-20 {
font-size: 20px !important;
line-height: 1.4;
}
.margin-top-30 {
margin-top: 30px !important;
display: block;
}
a.text-more-info:after {
content: "\f006";
font-family: mfg;
font-size: 0.8rem;
margin-left: 0.625rem;
transition: all 0.20s linear 0s;
-o-transition: all 0.20s linear 0s;
-ms-transition: all 0.20s linear 0s;
-moz-transition: all 0.20s linear 0s;
-webkit-transition: all 0.20s linear 0s;
}
a.text-more-info {
display: block;
font-size: 0.85rem;
margin-top: 0.625rem;
}
.text-white-hover, .text-primary-hover, .text-dark-hover {
transition: color 0.20s linear 0s;
-o-transition: color 0.20s linear 0s;
-ms-transition: color 0.20s linear 0s;
-moz-transition: color 0.20s linear 0s;
-webkit-transition: color 0.20s linear 0s;
}
.image-hover-zoom {
display: block;
overflow: hidden;
}
.image-hover-zoom img {
transition: all 0.20s linear 0s;
-o-transition: all 0.20s linear 0s;
-ms-transition: all 0.20s linear 0s;
-moz-transition: all 0.20s linear 0s;
-webkit-transition: all 0.20s linear 0s;
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
header.php。徽标的代码在其中，请用我提供的内容替换它，并删除#logo-container a{background:url('http://www.zerocarbonfood.co.uk/test/wp-content/uploads/2013/07/wide-logo-2.png') no-repeat;}的内联样式。 - McNab