Html 使div可伸缩并保持其图像大小_Html_Css

Html 使div可伸缩并保持其图像大小

html css

Html 使div可伸缩并保持其图像大小,html,css,Html,Css,这两个div有点问题。首先，我希望它们是可伸缩的。我知道这是通过使用百分比来实现的，但是每次我使用百分比时，div都会出现错误。当我使用width时，这些在Google Chrome中是可以的，但在IE中不是，但是它们显然是不可伸缩的。此外，我有一个灰色过滤器的图像，看起来严重不合适，如果div不是完美地挨在一起请看一下代码，如果我做错了什么，请告诉我；我只能假设我是首先是到和的链接，现在是代码，基本HTML:` <div class="My-Gems"> <di

这两个div有点问题。首先，我希望它们是可伸缩的。我知道这是通过使用百分比来实现的，但是每次我使用百分比时，div都会出现错误。当我使用width时，这些在Google Chrome中是可以的，但在IE中不是，但是它们显然是不可伸缩的。此外，我有一个灰色过滤器的图像，看起来严重不合适，如果div不是完美地挨在一起

请看一下代码，如果我做错了什么，请告诉我；我只能假设我是

首先是到和的链接，现在是代码，基本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-->
        `

第一：你有一个图像的宽度：100%，另一个没有，这将使一个图像比另一个更大

第二：您不应该在“表”之外使用表单元格显示，否则它在某些浏览器（例如firefox）中将无法正常工作

第三：根据width:100%的规范，要在所有浏览器上工作，它的父元素必须是body或本身有一个width设置，因此树中的每个元素都必须有一个width:100%，除了第一个元素应该有width:50%外。为了实现上述目的，请记住删除边距，如果不需要，可以从所有元素中选择填充和边框

这应该起作用：重新组织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-->

编辑：答案不完整，

我意识到Alpha遮罩悬停略微溢出div，这是由于display:inline的小间隙造成的

因此，我把这个添加到加布里埃尔的anwser中

.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:


最新作品

您能否提供更多关于您希望它们外观的详细信息？您希望两个图像并排分割整个屏幕宽度，还是希望任一侧有任何边距或与其他元素对齐？我希望可缩放图像在任一侧都没有边距。我现在已经弄明白了，所以我将发布基于Gabriels答案的代码。

.item-img img {
    display:block
}

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-->