垂直和水平响应图像

我有一个叠加图像需要垂直和水平响应才能在桌面和移动设备上工作。垂直和水平响应图像

编辑：通过垂直响应，我的意思是它需要保持在窗口内，而不是在屏幕底部以下溢出。

图片顶部有一个元素需要留在同一个地方，图片必须保留其长宽比。

我宁愿用纯CSS做这件事，但可以使用JS来实现浏览器兼容性或更简单的解决方案。

http://codepen.io/brooksroche/pen/mEgJmd?editors=1100

<div class="container"> 
    <div class="img-container"> 
    <img src="http://placehold.it/300X200"> 
    <div class="example"></div> 
    </div> 
</div> 

.container { 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 
} 

.img-container { 
    position: relative; 
    margin: 0 auto; 
    border: 1px solid red; 
    width: 300px; 
    max-width: 100%; 
} 

.img-container img { 
    display: block; 
    max-width: 100%; 
    max-height: 100%; 
} 

.example { 
    position: absolute; 
    border: 1px solid blue; 
    top: 40%; 
    left: 30%; 
    width: 38%; 
    height: 20%; 
}

来源

2016-08-18 Brooks Roche

你有没有这样的事情“调整大小，但保持宽高比”？ http://stackoverflow.com/questions/12991351/css-force-image-resize-and-keep-aspect-ratio这是问题，你有吗？ –

尝试的宽度和高度设置为auto：

.img-container img { 
display: block; 
width: auto; 
height: auto; 
}

或者我已经设置了宽度或高度，然后自动将其他已奏效。

来源

2016-08-18 18:50:04 waynejames

这不会使它适合在窗口内垂直 –

我刚刚玩过@ mehdi-dehghani的codepen - 它的作品，如果你删除'display：flex;'从'.img-container'或添加'align-items：flex-start'。不知道这是否是一种选择。 – waynejames

查看CSS媒体查询。

max-width和max-height一旦你为你想要覆盖的屏幕尺寸选择合适的断点，CSS属性应该能够解决你的问题。

结账this Stack Overflow post。

来源

2016-08-18 18:50:45 existenzial

更新

我刚刚更新codepen &也推杆代码在这里了。

<div class="container"> 
    <div class="img-container"> 
     <img src="http://placehold.it/500X300"> 
     <div class="example"></div> 
    </div> 
</div> 

.container { 
    border: 1px solid red; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-justify-content: space-around; 
    justify-content: space-around; 
    -webkit-flex-wrap: wrap; 
    flex-wrap: wrap; 
} 

.img-container { 
    position: relative; 
    overflow: hidden;  
    display: flex;  
} 

.img-container img { 
    display: block; 
    max-width: 100%; 
    margin: auto; 
} 

.example { 
    border: 1px solid blue; 
    height: 20%; 
    position: absolute;  
    width: 100%; 
    top: 50%; 
    transform: translateY(-50%);  
}

这里是工作codepen

来源

2016-08-18 18:55:22

这不是垂直响应，我需要覆盖层留在同一个地方。 –

@BrooksRoche请重新检查我的答案，也'codepen'链接 –

垂直和水平响应图像

回答

相关问题