Question

我正在使用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%;
}

Answer 1

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

Answer 2

我认为Saurabh是对的。当父元素不可调整大小时，我们怎么能期望它的子元素可以调整大小。试着让你的#content调整大小。以百分比表示宽度。它会让你的图像自动响应。希望它可以帮到你。

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

Answer 3

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

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

3 个答案: