IMG 标签包含 inside flex div

Question

我似乎无法在任何地方找到解决方案。

我有一个页面，其中包含通过 flex 显示的三个元素：页眉、容器和页脚。页眉和页脚只包含它们需要的内容，但容器必须占用 window 中剩余的所有 space。这是通过 flex 属性实现的。

我想插入一个 Slick Carousel 并包含它，就像您可以包含图像作为背景一样（但使用 img 标签，用于语义）。

您可以在此处查看示例代码：

<html>
<head>
    <title>Manuel del Pozo | Interiorismo & Diseño</title>
</head>
<body>
    <div class="flex-container">
        <header>
            <div class="links">
                <div class="lang-selector">
                    <a href="#">EN</a>
                    <a href="#">/ ES</a>
                    <a href="#">/ PT</a>
                </div>
                <div class="social-links">
                    <a href="#" class="fa fa-facebook">Fb</a>
                    <a href="#" class="fa fa-twitter">Tw</a>
                    <a href="#" class="fa fa-instagram">Ig</a>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="logo-header">
                <h1>Manuel del  Pozo</h1>
                <h2>Interiorismo & Diseño</h2>
            </div>
            <nav>
                <a href="#">Home</a>
                <a href="#">Estudio</a>
                <a href="#">Proyectos</a>
                <a href="#">Servicios</a>
                <a href="#">About Me</a>
                <a href="#">Contacto</a>
            </nav>
        </header>
        <div class="container">
            <div class="carousel">
                <img src="http://www.manueldelpozoid.com/root/img/portfolio/01.jpg" alt="Portfolio Image 01">
            </div>
        </div>
        <footer>
            <div class="philo">
                <p>Creamos un espacio hecho a tu medida, adaptándolo a tus gustos y necesidades</p>
            </div>
            <div class="footer-contact">
                <a href="mailto:manuel@fake.com">manuel@fake.com</a>
                <p> | </p>
                <p>Tlf.: XXX XXX XXX</p>
            </div>
        </footer>
    </div><!--  end of flex-container   -->
</body>
</html>

http://codepen.io/anon/pen/MaRPop?editors=110

它没有旋转木马，只有一张图片使这更容易。

谢谢！

Answer 1

不确定您需要什么，因此请尝试将以下 CSS 添加到您的 style.css 中，看看我是否接近。

CSS

/*******************************************************************************
GENERAL
*******************************************************************************/
html,
body {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    max-width: 100%;
    max-height: 100%;
    font-family: 'Courier', serif;
}
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/*******************************************************************************
FLEX DISPLAY SETTINGS
*******************************************************************************/
.flex-container {
    display: flex;
    flex-flow: column wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
    width: 100%;
    height: 100%;
    max-height: 100%;
    padding: 20px;
  overflow-y: auto;  
  overflow-x: hidden;

}

.flex-container header {
  flex: 0 0  15vh;
  position: fixed;
  top: 0;
   height: 15vh;
   width: 100%;
}
.flex-container .container {
    flex: 1 0 70vh;
    width: 100%;
    height: calc(100% - 30vh);
    overflow-y: auto;
    overflow-x: hidden;
    position: absolute;
    top: calc(100% - 30vh);
}
.flex-container footer {
   flex: 0 0 15vh;
   position: fixed;
   bottom: 0;
   height: 15vh;
   width: 100%;
}

Answer 2

使用 zer00ne CSS，我为页眉和页脚设置了固定高度，然后对容器“100vh -（页眉+页脚）”进行了计算。然后将 100% 高度分配给所有元素，直到 img，我用 object-fit:contain;

帮我修好了

IMG 标签包含 inside flex div

IMG Tag Contain inside flex div

css

image

flexbox