2

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

显示图像的 div.display在 HTML 的第 13 行有一个类 , 并且这个 div 的 css 格式是第 90 行。

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

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

有人可以帮助我吗？

PS：我需要一个响应式的解决方案。

谢谢

4

4 回答 4

7

由于 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%如果图像响应，在某个阈值之后将始终是图像的宽度。

于 2014-05-29T20:53:30.227 回答
0

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

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

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

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

于 2013-01-20T22:56:06.577 回答
0

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

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

于 2013-01-21T01:07:36.993 回答
0

最简单的解决方案是设置.display为display: inline-block;，这会将其大小调整为包含的图像。如果您也想响应，例如，您需要通过 定义一个上限max-height: 80%。

放在一起，它看起来像这样：http ://codepen.io/anon/pen/IluBt

JS 第 17 行：

$(".display").css("display","inline-block");

CSS 为.display

.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;
}
于 2014-06-05T12:23:27.240 回答