相关疑难解决方法(0)

我试图了解对我来说似乎是出乎意料的行为:

我在容器内部有一个最大高度为100%的元素,该元素也使用了最大高度,但是,出乎意料的是,子元素溢出了父元素:

测试用例:http://jsfiddle.net/bq4Wu/16/

.container {  
    background: blue; 
    padding: 10px; 
    max-height: 200px; 
    max-width: 200px; 
}

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

但是,如果父级具有明确的高度,则这是固定的:

测试用例:http://jsfiddle.net/bq4Wu/17/

.container {  
    height: 200px;
}

有谁知道为什么孩子在第一个例子中不会尊重其父母的最大身高？为什么需要明确的高度？

我找到了这个主题 - 如何在保持图像宽高比的同时拉伸图像以填充<div>？ - 这不完全是我想要的东西.

我有一个特定大小的div和里面的图像.无论图像是横向还是纵向,我都希望始终用图像填充div.如果图像被切断(div本身隐藏了溢出)并不重要.

因此,如果图像是肖像我希望它width是100%,height:auto所以它保持成比例.如果图像是风景我想要的height是100%和width to beauto`.听起来很复杂吧？

<div class="container">
   <img src="some-image.jpg" alt="Could be portrait or landscape"/>
</div>

由于我不知道该怎么做,我只是简单地创建了我的意思的快速图像.我甚至无法正确描述它.

所以,我想我不是第一个问这个的人.但是我无法真正找到解决方案.也许有一些新的CSS3方式这样做 - 我想的是flex-box.任何的想法？也许它比我预期的要容易得多？

通常情况下,您使用图像居中display: block; margin: auto,但如果图像大于容器,则它会向右溢出.如何让它同样溢出到双方？容器的宽度是固定的并且是已知的.图像的宽度未知.

我想从矩形照片制作一个居中的圆形图像.照片的尺寸未知.通常它是一个矩形形式.我尝试了很多方法:

CSS:

.image-cropper {
    max-width: 100px;
    height: auto;
    position: relative;
    overflow: hidden;
}

.image-cropper img{
    display: block;
    margin: 0 auto;
    height: auto;
    width: 150%; 
    margin: 0 0 0 -20%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;  
}

HTML:

<div class="image-cropper">
    <img src="http://www.electricvelocity.com.au/Upload/Blogs/smart-e-bike-side_2.jpg" class="rounded" />
</div>

我正在将图像渲染到我的div中.我想避免拉伸我的形象.

    div {
           height: 300px;
           width: 300px; 
        }
    img {
           min-width: 300px;
           min-height: 300px;
           max-height: 300px;   
        }

我的问题是,我的图像在宽度上拉伸.我希望是正常的宽度,即使有些图像会遗漏.

   div {
           height: 300px;
           width: 300px; 
           overflow: hidden;
        }
    img {
           height: 300px
           max-width: none;
           min-width: 300px;
        }

我解决了

这是我要实现的布局：

我已经使用此CSS创建了六边形：

.hexagon {
  width: 100px;
  height: 55px;
  background: red;
  position: relative;
  display:inline-block;
  margin:0.2em;
}
.hexagon:before {
    content: "";
    position: absolute;
    top: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid red;
}
.hexagon:after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid red;
}

但是，我正在寻找如何用图像填充它们。这是一支笔：https : //codepen.io/1istbesser/pen/ddypXK

如何将图像放入六边形以使其覆盖全部？如果在＃hexagon1上使用background-image，则图像仅覆盖中间部分。

我正在创建一个全屏灯箱幻灯片/轮播，并srcset用于提供最合适的图像。

但是，我不确定如何解决这个问题，因为我的图片有两种方向 - 横向和纵​​向。

根据图像纵横比、图像大小和屏幕大小，某些图像的宽度将首先最大化，而其他图像的高度将最大化。

在某些情况下，所有图像首先在宽度（考虑纵向）或高度（考虑横向）上最大化。

tl; dr - 宽度或高度永远不会达到最大值 === 这很复杂

我怎么想把它写成一个针对 size 属性的媒体查询？我什至不知道从哪里开始。

对于代码和可视化示例，我创建了一支钢笔 -转到钢笔

HTML

<div class="container">
  <img src="image.jpg">
</div>
<div class="container">
  <img src="image-2.jpg">
</div>

CSS

.container {
  display: flex;
  height:100vh;
  width:100vw;
  justify-content: center;
  align-items: center;
}

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

http://www.bootply.com/somVIZEXxC#这是我的网站的bootply,基本上我希望cols col-lg-6的高度相同,以便我在其中的图像是均匀的,此刻,一个图像在另一个图像下方延伸.

编辑:当前版本http://www.bootply.com/UIWf6q09h4