Question

我正在尝试使用一个非常好的高级Wordpress主题将一个网站放在一起为朋友。我已经为主题付了钱，但设计师无法帮助定制。

该网站目前位于www.zerocarbonfood.co.uk/test/。最初的主题有一个小的左对齐标志，但我的朋友喜欢这个大的全宽度，我觉得效果更好。现在的问题是我在iPad或iPhone（肖像）上看它，徽标太大而且搞砸了。在主题选项中，它被定义为922px宽度和168px高度。我不能在那里放一个百分比值。我可以在CSS中覆盖这个吗？

任何帮助都会感激不尽，因为我有点超出了我的想法。

Answer 1

处理它的最简单方法是将徽标图像插入内嵌而不是背景图像。这样你就可以将CSS应用到img元素本身;

<强> 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

#logo-container img {
   width: 100%;
   height: auto;
}

Answer 2

尝试使用max-width: 100%; height: auto;这应该正确调整图像大小。

Answer 3

您可以在css中使用以下媒体条件

 /* Resize Background*/
@media only screen and (max-width: 800px) {

    #header{
            width: 100%;
            height: auto;
            background-size: 100% auto !important;
    }
}

Answer 4

尝试使用％而不是px。这样，您的图片将随页面大小而缩放。

在您的HTML中，您可以尝试类似

的内容

<img src="logo.png" width="80%" height="80%"/>

这会随着屏幕宽度而缩放。当然，您也希望缩放高度以保持纵横比。

仅供参考，当我一直缩小时，我的Android手机上的网站看起来很不错。

Answer 5

尝试设置图像样式，而不是链接。

logo-container img {
width: 100%;
height:auto;
}

Answer 6

尝试

INT_MAX

它将覆盖以前的值。

Answer 7

图像如何在悬停时放大？

以下是示例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;
}

Answer 8

您是否在标题中使用了视口元标记？

<meta name="viewport" content="width=device-width, initial-scale=1.0">

如何使我的标题图像正确响应？

8 个答案: