图像没有调整响应式设计大小

我使用的是Wordpress Twenty Twelve主题中的小孩，当我缩小屏幕时，图像不会调整大小。我遇到的页面是：图像没有调整响应式设计大小

http://69.195.124.68/~discowv9/?page_id=146

如果缩小屏幕的宽度，您将看到图像不会改变大小。通常，WP中的这个主题会自动调整图像大小。我似乎无法找到不允许调整大小的CSS代码。

非常感谢您的帮助。

我试图张贴屏幕截图，但我的声望不够高。这是高尔夫球杆手柄拍摄前后的图像。

<div style="white-space:nowrap;"><img class="wp-image-438 alignleft" src="http://69.195.124.68/~discowv9/wp-content/uploads/2013/04/Cleaning-Process-of-Club-Grip.jpg" alt="Cleaning a Golf Club Grip with Club Care" style="line-height: 1.714285714; font-size: 1rem;"></img></div> 

.entry-content img, .comment-content img, .widget img { 
    max-width: 100%; 
} 
img[class*="align"], img[class*="wp-image-"], img[class*="attachment-"] { 
    height: auto; 
} 
img.size-full, img.size-large, img.header-image, img.wp-post-image { 
    height: auto; 
    max-width: 100%; 
}

来源

2013-04-04 MattM

你是什么意思？ – Lemurr 2013-04-04 02:12:47

将相关代码添加到问题将有所帮助。突出显示问题区域的截图也会有所帮助。 – 2013-04-04 02:19:17

添加代码。希望能帮助到你。 – MattM 2013-04-04 04:31:03

实际上，图像将调整大小，当放置图像的容器将调整大小，如果您使用div或任何其他元素确保它也调整大小...如果您试图为响应设计你可以使用CSS3媒体查询 ...我的建议是因为您的网站是您的网站是动态的WordPress的...确保这些媒体查询将有助于...

来源

2013-04-04 05:37:11 SaurabhLP

以及当您使用这些媒体查询使其响应时，使您的图像成为css精灵，以便相应地缩放。我喜欢这个答案+给你@SaurabhLP – 2013-04-04 08:20:27

谢谢Saurabh。添加宽度：100％到＃内容效果很好！ – MattM 2013-04-04 21:58:09

-1

使用白色空间：nowrap;在你的分区

来源

2013-04-04 02:14:35

我试图用这段代码把它包装在一个div中，但它没有工作。我应该把它放入图像代码本身吗？ – MattM 2013-04-04 04:30:20

我hink SAURABH是正确的。当父元素不可调整大小时，我们如何期望它的孩子可以调整大小。试着让你的＃内容被调整大小。以百分比给它的宽度。它会让你的图像自动响应。希望它可以帮助你。

#content { 
float: left; 
padding-right: 1em; 
width: 100%; 
}

来源

2013-04-04 18:55:33

如果我有代表+1，我会。感谢您提供代码！ – MattM 2013-04-05 22:14:07

它的好朋友。任何时候 – 2013-04-05 23:15:53

图像没有调整响应式设计大小

回答

相关问题