我使用的是HB主题Aegaeus主题，它非常棒，除了一个短代码元素（HB框）正在调整图像的大小。
（显然，自动调整站点元素大小以适应移动设备是使用响应式设计的主要原因之一，但在这种情况下，它会使图像主题看起来非常非常糟糕。）
http://www.fullyhr.com/about/
How do I maintain the image size-ratio?
这是所讨论图像的短代码
on the page:
[hb_image_box image="http://fullyhr.com/wp-content/uploads/2015/07/headshot_l_amanda.jpg" link="http://fullyhr.com/portfolio/amanda-mayo-sphr/"
title="Amanda Mayo" subtitle="SPHR, Founder, Sr HR Consultant"]
我已经尝试了以下自定义css解决方案：
.custom-hb-box { width: 100% !important; display:block; height: auto !important; }
.custom-hb-box img { height: auto !important; width: 100% !important; }
但是，这些会导致网站超时，并出现“网站不可用”错误。
更新这里是短代码from the theme-shortcodes.php file:
function hb_custom_box($atts, $content = null){
extract(shortcode_atts(array(
\'title\' =>\'Title here\',
\'subtitle\' => \'Subtitle here\',
\'image\' =>\'\',
\'link\' =>\'http://\'
), $atts));
$image = hb_resize(null, $image, 460, 400, true);
$image = $image[\'url\'];
$output = "
<div>
<a href=\'$link\' class=\'custom-hb-box\'>
<img src=\'$image\' rel=\'Image\'>
<div class=\'hb-custom-title\'>
<span class=\'titt\'>$title</span>
<span class=\'subtitt\'>$subtitle</span>
</div>
<div class=\'hb-custom-glare\'></div>
</a>
</div>";
return $output;
}
add_shortcode(\'hb_image_box\', \'hb_custom_box\');
最合适的回答,由SO网友:BillK 整理而成
如果看不到相关的HTML，就很难知道CSS属性在做什么。我将使用max width属性而不是widthimg{ max-width: 100%; }.
更新：我刚刚注意到你提供了一个链接。height属性存在问题：
.custom-hb-box img {
display: block;
height: 100%;
opacity: 1;
transition: opacity 0.2s linear 0s;
width: 100%;
}
设置\'。自定义hb框img{高度：自动；}似乎可以解决图像问题，但文本也有问题。
#main-content-with-sidebar .custom-hb-box {
height: 205px !important;
width: 33% !important;
}
显式像素高度不起作用。看起来这样做是为了补偿图像没有所需的纵横比这一事实。调整图像大小，使其比例为211:205，这将与容器元素相匹配。
然后试试看
#main-content-with-sidebar .custom-hb-box {
height: auto;
}
或者只删除上述规则中的height属性；真的不需要。
SO网友:Jules Maas
好啊由于我对BillK建议的所有评论，我只想澄清一下，我能够解决这个问题。
我不再在“高端选项”>“常规设置”中的自定义css字段中添加css（正如主题开发人员所建议的那样），而是退出WordPress中的dinking，直接登录到服务器，在那里编辑css。
以下是服务器文件路径：
wp内容>主题>Aegaeus>css>样式。css
Near the bottom is this bit:
#main-content-with-sidebar .custom-hb-box{width:33%!important;height:205px!important}
Change it to this:
#main-content-with-sidebar .custom-hb-box{height:auto;}
瞧！它是固定的。谢谢BillK！（请投票支持他的答案，一切都在那里！）
