使div可扩展并保持其图像大小

Question

这两个div有点问题。首先，我希望它们具有可扩展性。我知道这是通过使用百分比来完成的，但是每当我使用百分比时，div就会失去位置。当我使用宽度时，这些在谷歌浏览器中是可以的，但不是IE，但它们显然不具备可扩展性。另外，我在图像上有一个灰色滤镜，如果div不是完全相邻的话，它们看起来很不合适。

请查看代码，如果我做了任何重大错误，请告诉我。我只能假设我是。

首先是指向here和Jsfiddle的链接，现在是代码，基本HTML：`

  <div class="My-Gems">
   <div class="item item-type-double"> <a class="item-hover">
  <div class="item-info">
    <div class="date">Branding</div>           
            <div class="line"></div>            
            <div class="headline">Money Matters</div>
            <div class="line"></div>
           </div>
         <div class="mask"></div>
       </a>

                        <div class="item-img">
                            <img src="http://s29.postimg.org/8safbuqmf/Money_Matters_Logo_gif.png " style="width:100%;" alt="" />
                        </div>
                    </div>
                    <div class="item item-type-double"> <a class="item-hover" href="https://www.youtube.com/watch?v=S74yj5rnvAo" target="_blank">
           <div class="item-info">
            <div class="date">Events</div>           
            <div class="line"></div>            
            <div class="headline">Metaphon Fitness</div>
            <div class="line"></div>
           </div>
        <div class="mask"></div>
       </a>

                        <div class="item-img">
                            <img src="http://s29.postimg.org/wrpgkar0n/Metaphon_Fitness.png" />
                        </div>
                    </div>
                </div>
                <!-- end of my-gems-->
        `

CSS，再次基本。

    .My-Gems {
    width: 100%;
    height: 100%;
}

h2.Second-Header {
    color: black;
    font-weight:400;
    font-family:'Abril Fatface', cursive;
    font-size: 3em;
    margin: 80px;
}


.item {
    text-align:center;
    float:left;
    position:relative;
}
.item, .item-hover, .item-hover .mask, .item-img, .item-info {
    width: 600.5px;
    height: 600px;
}
.item-hover, .item-hover .mask, .item-img {
    position:absolute;
    top:0;
    left:0;
}
.item-type-double .item-hover {
    z-index:5;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    opacity:0;
    cursor:pointer;
    display:block;
    text-decoration:none;
    text-align:center;
}
.item-type-double .item-info {
    z-index:10;
    color:#ffffff;
    display:table-cell;
    vertical-align:middle;
    position:relative;
    z-index:5;
}
.item-type-double .item-info .headline {
    font-size:2.4em;
    font-family:'open sans';
    text-transform: uppercase;
    width:90%;
    margin:0 auto;
}
.item-type-double .item-info .date {
    font-size:20px;
    font-family:'Canter';
    text-transform: uppercase;
}
.item-type-double .item-hover .mask {
    background-color:#000;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity:0.5;
    z-index:0;
}
.item-type-double .item-hover:hover .line {
    width:90%;
}
.item-type-double .item-hover:hover {
    opacity:1;
}
.item-img {
    width:100%;
    z-index:0;


}

Answer 1

首先：你有一个宽度为100％的图像，另一个没有，这会使一个图像比另一个大。

第二：你不应该在'table'之外使用表格单元格显示，否则它会在某些浏览器中不正常工作（例如firefox）

第三：通过宽度规范：100％在所有浏览器上工作它的父级必须是正文或者自己有宽度设置，所以树中的每个元素都必须有宽度：100％，除了第一个应该是宽度：50％用于描述目的，请记住在不需要的情况下从所有元素中删除边距，填充和边框。

这应该有效：https://jsfiddle.net/r469x2at/17/embedded/result/ 重新组织HTML，以便我们可以拥有动态高度：               最新作品

    <div class="item item-type-double">
        <div class="item-img">
            <img src="http://s29.postimg.org/8safbuqmf/Money_Matters_Logo_gif.png " style="width:100%;" alt="" />
        </div> <a class="item-hover">
               <div class="item-info">
                   <div class="mycell">
                <div class="date">Branding</div>           
                <div class="line"></div>            
                <div class="headline">Money Matters</div>
                <div class="line"></div>
                   </div>
               </div>
             <div class="mask"></div>
           </a>

    </div>
    <div class="item item-type-double">
        <div class="item-img">
            <img src="http://s29.postimg.org/wrpgkar0n/Metaphon_Fitness.png" style="width:100%;" />
        </div> <a class="item-hover" href="https://www.youtube.com/watch?v=S74yj5rnvAo" target="_blank">
               <div class="item-info">
                   <div class="mycell">
                <div class="date">Events</div>           
                <div class="line"></div>            
                <div class="headline">Metaphon Fitness</div>
                <div class="line"></div>
                   </div></div>
            <div class="mask"></div>
           </a>

    </div>
</div>
<!-- end of my-gems-->

一些CSS更改，因此我们有动态高度和自动宽度：

.item {
    text-align:center;
    float:left;
    position:relative;
    width: 50%;
    height: 100%;
}
.item-hover, .item-hover .mask, .item-img, .item-info {
    width: 100%;
    height: 100%;
}
.item-hover, .item-hover .mask {
    position:absolute;
    top:0;
    left:0;
}
.item-type-double .item-hover {
    z-index:5;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    opacity:0;
    cursor:pointer;
    display:block;
    text-decoration:none;
    text-align:center;
}
.item-type-double .item-info {
    z-index:10;
    color:#ffffff;
    display:table;
    position:relative;
    z-index:5;
}
.item-type-double .item-info div.mycell {
    vertical-align:middle;
    height: 100%;
    display:table-cell;
}

编辑：答案不完整，https://jsfiddle.net/r469x2at/17/

Answer 2

我意识到Alpha Mask的悬停略微溢出了div，这是由于显示的小间隙引起的：内联。

我因此将此添加到加布里埃尔的回复中。

.item-img img {
    display:block
}

最终代码如下，CSS

body, div, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section {
    margin: 0;
    padding: 0;
    border: 0;
}
.My-Gems {
    width: 100%;
    height: 100%;
}
h2.Second-Header {
    color: black;
    font-weight:400;
    font-family:'Abril Fatface', cursive;
    font-size: 3em;
    margin: 80px;
}
.item {
    text-align:center;
    float:left;
    position:relative;
}
.item {
    width: 50%;
    height: 100%;
}
.item-hover, .item-hover .mask, .item-img, .item-info {
    width: 100%;
    height: 100%;
}
.item-hover, .item-hover .mask {
    position:absolute;
    top:0;
    height:100%;
    left:0;
}
.item-type-double .item-hover {
    z-index:5;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    opacity:0;
    cursor:pointer;
    display:block;
    text-decoration:none;
    text-align:center;
}
.item-type-double .item-info {
    z-index:10;
    color:#ffffff;
    display:table;
    position:relative;
    z-index:5;
}
.item-type-double .item-info div.mycell {
    vertical-align:middle;
    height: 100%;
    display:table-cell;
}
.item-type-double .item-info .headline {
    font-size:2.4em;
    font-family:'open sans';
    text-transform: uppercase;
    width:90%;
    margin:0 auto;
}
.item-type-double .item-info .date {
    font-size:20px;
    font-family:'Canter';
    text-transform: uppercase;
}
.item-type-double .item-hover .mask {
    background-color:#000;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity:0.5;
    z-index:0;
}
.item-type-double .item-hover:hover .line {
    width:90%;
}
.item-type-double .item-hover:hover {
    opacity:1;
}
.item-img {
    width:100%;
    z-index:0;
}
.item-img img {
    width:100%;
    display:block
}

HTML：

<div class="My-Gems">
  <h2 class="Second-Header">Latest Works</h2>
  <div class="item item-type-double">
    <div class="item-img">
      <img src="http://s29.postimg.org/8safbuqmf/Money_Matters_Logo_gif.png " alt="" />
    </div>
    <a class="item-hover">
      <div class="item-info">
        <div class="mycell">
          <div class="date">Branding</div>
          <div class="line"></div>
          <div class="headline">Money Matters</div>
          <div class="line"></div>
        </div>
      </div>
      <div class="mask"></div>
    </a>
  </div>
  <div class="item item-type-double">
    <div class="item-img">
      <img src="http://s29.postimg.org/wrpgkar0n/Metaphon_Fitness.png" />
    </div>
    <a class="item-hover" href="https://www.youtube.com/watch?v=S74yj5rnvAo" target="_blank">
      <div class="item-info">
        <div class="mycell">
          <div class="date">Events</div>
          <div class="line"></div>
          <div class="headline">Metaphon Fitness</div>
          <div class="line"></div>
        </div>
      </div>
      <div class="mask"></div>
    </a>

  </div>
</div>
<!-- end of my-gems-->

body, div, h1, h2, h3, h4, h5, h6, p, blockquote, pre, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section {
    margin: 0;
    padding: 0;
    border: 0;
}
.My-Gems {
    width: 100%;
    height: 100%;
}
h2.Second-Header {
    color: black;
    font-weight:400;
    font-family:'Abril Fatface', cursive;
    font-size: 3em;
    margin: 80px;
}
.item {
    text-align:center;
    float:left;
    position:relative;
}
.item {
    width: 50%;
    height: 100%;
}
.item-hover, .item-hover .mask, .item-img, .item-info {
    width: 100%;
    height: 100%;
}
.item-hover, .item-hover .mask {
    position:absolute;
    top:0;
    height:100%;
    left:0;
}
.item-type-double .item-hover {
    z-index:5;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    opacity:0;
    cursor:pointer;
    display:block;
    text-decoration:none;
    text-align:center;
}
.item-type-double .item-info {
    z-index:10;
    color:#ffffff;
    display:table;
    position:relative;
    z-index:5;
}
.item-type-double .item-info div.mycell {
    vertical-align:middle;
    height: 100%;
    display:table-cell;
}
.item-type-double .item-info .headline {
    font-size:2.4em;
    font-family:'open sans';
    text-transform: uppercase;
    width:90%;
    margin:0 auto;
}
.item-type-double .item-info .date {
    font-size:20px;
    font-family:'Canter';
    text-transform: uppercase;
}
.item-type-double .item-hover .mask {
    background-color:#000;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity:0.5;
    z-index:0;
}
.item-type-double .item-hover:hover .line {
    width:90%;
}
.item-type-double .item-hover:hover {
    opacity:1;
}
.item-img {
    width:100%;
    z-index:0;
}
.item-img img {
    width:100%;
    display:block
}

<div class="My-Gems">
  <h2 class="Second-Header">Latest Works</h2>
  <div class="item item-type-double">
    <div class="item-img">
      <img src="http://s29.postimg.org/8safbuqmf/Money_Matters_Logo_gif.png " alt="" />
    </div>
    <a class="item-hover">
      <div class="item-info">
        <div class="mycell">
          <div class="date">Branding</div>
          <div class="line"></div>
          <div class="headline">Money Matters</div>
          <div class="line"></div>
        </div>
      </div>
      <div class="mask"></div>
    </a>
  </div>
  <div class="item item-type-double">
    <div class="item-img">
      <img src="http://s29.postimg.org/wrpgkar0n/Metaphon_Fitness.png" />
    </div>
    <a class="item-hover" href="https://www.youtube.com/watch?v=S74yj5rnvAo" target="_blank">
      <div class="item-info">
        <div class="mycell">
          <div class="date">Events</div>
          <div class="line"></div>
          <div class="headline">Metaphon Fitness</div>
          <div class="line"></div>
        </div>
      </div>
      <div class="mask"></div>
    </a>

  </div>
</div>
<!-- end of my-gems-->