Question

我使用Maya Theme但由于某些原因，当我在手机上使用时，我的图像在主页上没有响应。任何人都可以告诉我他们为什么显示全尺寸？

http://www.brycemckenzie.co.uk

由于

<div class="borderpattern" style="margin-top: 20px;"></div>
<h3 style="text-align: center; padding-top: 30px; padding-bottom: 25px;">Bryce McKenzie: Interior Design Edinburgh provides a comprehensive design and project management service for residential and commercial projects.</h3>
<div class="borderpattern" style="margin-top: 15px; margin-bottom: 25px;"></div>
<div id="imagemenu">
<div class="imagemenu-item-large"><a href="bryce-mckenzie-upholstered-furniture"><img class="wp-image-103 alignleft" src="http://www.brycemckenzie.co.uk/wp-content/uploads/2014/02/productsandservices.jpg" alt="Products And Services" width="100%" height="auto"/></a></div>
<div class="imagemenu-item-large"><a href="drapery"><img class="alignright wp-image-102" src="http://www.brycemckenzie.co.uk/wp-content/uploads/2014/02/portfolio4.jpg" alt="Portfolio" width="100%" height="auto"/></a></div>
<div class="clear" style="height: 30px;"></div>
<div class="imagemenu-item-small"><a href="about/showroom"><img class="size-full wp-image-103 alignleft" src="http://www.brycemckenzie.co.uk/wp-content/uploads/2014/02/aboutus1.jpg" alt="About Us"/></a></div>
<div class="imagemenu-item-small"><a href="featured-artists/alison-rollo-sculptor"><img class="size-full wp-image-103 alignleft" src="http://www.brycemckenzie.co.uk/wp-content/uploads/2014/02/featuredartists.jpg" alt="Featured Artists"/></a></div>
<div class="imagemenu-item-small"><a href="press"><img class="size-full wp-image-103 alignleft" src="http://www.brycemckenzie.co.uk/wp-content/uploads/2014/02/press.jpg" alt="Press"/></a></div>
<div class="imagemenu-item-small"><a href="contact"><img class="size-full wp-image-103 alignleft" src="http://www.brycemckenzie.co.uk/wp-content/uploads/2014/02/contactus.jpg" alt="Contact Us" /></a></div>
</div>

Answer 1

我可以通过这样做来解决这个问题： .imagemenu-item-large a{width: auto;}

请记住将其添加到媒体查询中。

Answer 2

你有这个：

.imagemenu-item-large a {
    display: block;
    width: 425px;
    height: 299px;
}

由于href元素导致图片填充到block的大小。如果您删除display: block，然后在图片中添加以下内容：

.yourimageclass {
    width: 100%;
    height: auto;
    display: block;
}

然后他们会展示你想要的。我不确定你想要使用什么类名，所以你必须改变它。希望有所帮助。

Answer 3

一些问题：

图片的原始尺寸不够大。您的站点的断点设置为960px（当图像垂直堆叠时），但图像宽度仅为425px。一种解决方案是上传更大的图像。或者，它可能是CMS正在调整图像大小。如果是这种情况，您需要配置CMS以保存较大的图像。虽然我们可以解决这个问题，但图像会被拉伸并变得像素化。

有一些CSS阻止图像（或其父图像）扩展到整个宽度。将以下内容添加到custom.css文件的末尾：

@media screen and (max-width: 960px) {
  .imagemenu-item-large {
    float: none;
  }

  .imagemenu-item-large a {
    width: 100%;
  }
}

这是做什么的？仅当屏幕宽度小于960px时，@media才会应用CSS。然后我们撤消先前在custom.css中设置的一些CSS，以允许图像的父容器全宽，然后图像周围的a标签变为全宽，允许图像充满-width。

Answer 4

图像是固定宽度。试试这个：

@media and (max-width: 767px) {
  .imagemenu-item-large {
    width: 324px;
    float: none;
    margin: 0;
  }
}

为什么我的图片没有响应（在iPhone上？）

4 个答案: