CSS 如何使我的标题图像正确响应？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17722132/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 23:34:12 来源:igfitidea点击:
How can I make my header image properly responsive?
提问by Andy Ashwin
I am trying to put a site together for a friend using a really nice premium Wordpress theme. I have paid for the theme but the designer will not help with customisation.
我正在尝试使用非常好的高级 Wordpress 主题为朋友建立一个网站。我已经为主题付费，但设计师不会帮助定制。
The site is currently at www.zerocarbonfood.co.uk/test/. Originally the theme had a small left-aligned logo but my friend favours this large full-width one, which I think works better. Problem is now that I look at it on an iPad or iPhone (portrait) the logo is too big and screws it up. In the theme options it is defined as 922px width and 168px height. I cannot put a percentage value in there. Can I override this in CSS somewhere?
该网站目前位于www.zerocarbonfood.co.uk/test/。最初主题有一个小的左对齐标志，但我的朋友喜欢这个大的全宽标志，我认为它更好用。现在的问题是我在 iPad 或 iPhone（纵向）上看它时，标志太大了，把它搞砸了。在主题选项中，它被定义为 922px 宽度和 168px 高度。我不能在那里输入百分比值。我可以在 CSS 中的某个地方覆盖它吗？
Any help would be gratefully received as I am a bit out of my depth.
任何帮助将不胜感激，因为我有点超出我的深度。
回答by McNab
The easiest way to deal with it is to insert the logo image inline rather than as a background image. That way you can apply CSS to the img element itself;
处理它的最简单方法是内联插入徽标图像而不是作为背景图像。这样你就可以将 CSS 应用到 img 元素本身；
HTML
HTML
<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
CSS
#logo-container img {
width: 100%;
height: auto;
}
回答by Juan Rangel
try using max-width: 100%; height: auto;this should resize the image properly.
尝试使用max-width: 100%; height: auto;它应该正确调整图像大小。
回答by Pankaj Sakariya
You can use following media condition in css
您可以在 css 中使用以下媒体条件
/* Resize Background*/
@media only screen and (max-width: 800px) {
#header{
width: 100%;
height: auto;
background-size: 100% auto !important;
}
}
回答by Pankaj Sakariya
Try using % instead of px. This way, your image will scale with page size.
尝试使用 % 而不是 px。这样，您的图像将随页面大小缩放。
In your HTML, you could try something like
在您的 HTML 中，您可以尝试类似
<img src="logo.png" width="80%" height="80%"/>
This would scale with screen width. Of course, you want to scale the height as well to preserve aspect ratio.
这将随屏幕宽度缩放。当然，您还想缩放高度以保持纵横比。
FYI, the site looks fine on my Android phone when I zoom out all the way.
仅供参考，当我一直缩小时，该网站在我的 Android 手机上看起来不错。
回答by Kerry Townsend
Try to style the image, not the link.
尝试设计图像的样式，而不是链接。
logo-container img {
width: 100%;
height:auto;
}
回答by Hasan Zubairi
Try
尝试
#logo-container img {
width: 100%; !important
height: auto; !important
}
It will overwrite the previous values.
它将覆盖以前的值。
回答by Guest
How image gets zoomed on hover?
悬停时图像如何放大？
Here is the sample html:
这是示例 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> [email protected]</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>
Here is part of css:
这是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;
}
回答by Chad
Did you use the viewport meta tag in the header?
您是否在标题中使用了视口元标记？
<meta name="viewport" content="width=device-width, initial-scale=1.0">
