jquery - 响应式肖像图像，Hows & Dont's？

Question

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

我有什么:

我使用 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 插件，尽管我不想使用它们)？或者一些链接可以深入研究？

谢谢。

Answer 1

使用最大宽度代替宽度:

img {
    max-width: 100%;
}

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