2

这个问题困扰了我一段时间。有大量关于响应式图像的教程和问答，但我还没有找到一个像样的，这可以解释我如何保持肖像图像的尺寸不拉伸到它们所在的硬币容器的宽度。

是）我有的：

我使用 WordPress，并使用脚本删除图像的宽度和高度：

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );

function remove_thumbnail_dimensions( $html ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;
}

然后我添加一个脚本，将我的附件放入一个 div 中（仅用于样式目的）。

add_filter('image_send_to_editor', 'wrap_my_div', 10, 8);

function wrap_my_div($html, $id, $caption, $title, $align, $url, $size, $alt){
    return '<div class="post-attachment">'.$html.'</div>';
}

然后是 CSS：

img {
        width: 100%;
}

.post-attachment {
    width: 80%;
    margin: 0 auto;
}

这对于风景图像非常有用，并且在移动设备上看起来很棒。但是如何保持纵向尺寸的图像，而不是缩放到 100% 容器的宽度？我知道，如果我声明了宽度：100% 并且我不希望某些图像是 100% 宽度，而是 100% 高度，这有点奇怪。

在此处输入图像描述

如果没有 CSS 方式，那么可能有人可以向我推荐任何 jquery 插件（或 WP 插件，尽管我不想使用它们）？或者一些要挖掘的链接？

谢谢你。

4

2 回答 2

3

而不是宽度，使用最大宽度：

img {
    max-width: 100%;
}

这样，如果它们很小，它们将是它们的原始大小，但如果它们更大，它们将保持在封闭父级的边界内。

于 2012-11-06T21:07:41.330 回答
1

你不能把你的肖像图像包装到另一个容器中吗？

就像是

.imageBox {
    width: 50%;
    height: 100%;
    margin: 0 auto;
}

如果您的响应式 CSS 设置正确，这应该与您的设计正确缩放 - 只需将宽度更改为您想要的图像宽度。

于 2012-11-06T19:50:18.590 回答