我有一个带有缩放图像显示的投资组合页面。 我有这个代码：http://codepen.io/Mpleandro/pen/LvrqJ
显示图像的 div 有一个 .display 类，位于 HTML 的第 13 行，此 div 的 css 格式位于第 90 行。
图像宽度会灵活，所以我想要的是让包含的div继承图像的宽度。
我尝试了 css 属性 auto、inherit 和 min-with，但没有任何效果！
有人可以帮我吗？
P.S.：我需要一个响应式解决方案。
谢谢
【问题讨论】：
标签： css responsive-design image inheritance
一年过去了，您可能对解决方案不感兴趣，但希望对其他人有所帮助。
我也遇到过这样的情况，我需要一个 div 与图像的宽度相同，并且它必须是响应式的。
就我而言，我为 div 设置了固定宽度
.some-div{
width: 250px;
}
我也有响应式图片：
img{
display: block;
max-width: 100%;
height; auto;
}
然后当div 的固定宽度开始影响响应性时，我添加了一个带阈值的媒体查询，并简单地添加了这个：
@media screen and (max-width: 917px){
.some-div{
width: 100%;
}
}
对于我的项目，当固定宽度开始影响时，阈值是917px。
我想这是一个适合所有人的解决方案，因为width: 100% 在特定阈值之后将始终是图像的宽度，如果图像是响应式的。
【讨论】：
我不知道如何给你一个完美的答案，但我希望能指引你正确的方向。首先，您可以忘记inherit 或min-width，因为它们不是您想要的。
auto 是默认值，我认为默认行为非常接近您想要的：div 的宽度适应其内容。如果这不是当前行为，这是由于许多其他原因，包括该 div 的定位。问题是，仅使用 CSS，您将无法对 <div class="display"> 进行正确的居中和调整大小，因为它需要特定的显式宽度声明。
由于您已经使用 Javascript 来显示/隐藏好的图像，您可以在每次更改框中的图像时使用 Javascript 设置宽度。
我最好的建议是使用经过测试、批准并且看起来非常好的现有解决方案。 2 秒的 Google 搜索将我指向 Fesco，您可以尝试一下。
【讨论】：
我不确定这是否是您的意思，但如果是，我希望它会有所帮助！
如果您希望图像填充 div，但要随浏览器缩放，请尝试设置 div 的宽度。接下来，将max-width="100%"; height: auto; 应用于您的图像。
【讨论】：
最简单的解决方案是将.display 设置为display: inline-block;，这会将其大小调整为包含的图像。如果您也想响应，您需要通过max-height: 80% 定义一个上限，例如。
放在一起，它看起来像这样：http://codepen.io/anon/pen/IluBt
JS 第 17 行：
$(".display").css("display","inline-block");
.display 的 CSS
.display {
position: relative;;
background: rgba(255,255,255,0.5);
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
max-height:80%; /* <-- limit the height */
top:10%;
left:0;
margin:auto;
}
并将所有内容对齐：
.loader {
color: red;
position: fixed;
width: 100%; height: 100%;
background: rgba(0,0,0, 1) url(../http://www.mpleandro.com.br/images/new/loader.gif) no-repeat center center;
text-align: center;
}
【讨论】：