响应式肖像图像，怎么做？

Question

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

我有什么：

我使用 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% 容器的宽度？我知道，如果我声明了 width:100% 并且我不希望某些图像是 100% 宽度，而是 100% 高度，这有点奇怪。

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

谢谢。

Answer 1

用max-width代替宽度：

img {
    max-width: 100%;
}

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

Answer 2

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

类似

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

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