Question

我有一个带有缩放图像显示的投资组合页面。我有这段代码：http://codepen.io/Mpleandro/pen/LvrqJ

显示图片的div在HTML的第13行有一个.display类，并且这个div isline 90的css格式化。

图像宽度将是灵活的，所以我想要的是使包含div继承图像的宽度。

我尝试了css属性auto，inherit和min-with，但没有任何效果！

有人可以帮助我吗？

P.S。：我需要一个响应式解决方案。

由于

Answer 1

自1年过去后，您可能对该解决方案不感兴趣，但希望能帮助其他人。

我也有类似的情况，我需要一个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%适合所有人。

Answer 2

我不知道如何给你一个完美的答案，但我希望能把你送到正确的方向。首先，您可以忘记inherit或min-width，因为它们不是您想要的。

auto是默认值，我认为默认行为非常接近您想要的：div的宽度适应其内容。如果这不是当前行为，这是因为许多其他原因，包括该div的定位。问题是，只有CSS才会对<div class="display">进行适当的居中和调整，因为它需要特定的显式宽度声明。

由于您已经使用Javascript来显示/隐藏好图像，因此每次更改框中的图像时都可以使用Javascript设置宽度。

我最好的建议是使用经过测试，批准并且看起来非常好的现有解决方案。 2秒谷歌搜索指向我Fesco您可以尝试。

Answer 3

我不确定这是不是你的意思，但如果是的话，我希望它会有所帮助！

如果您希望图像填充div，但要使用浏览器进行缩放，请尝试设置div的宽度。接下来，将max-width="100%"; height: auto;应用于您的图片。

Answer 4

最简单的解决方案是将.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;
}

根据图像宽度划分Div

4 个答案: