讓img元素指示容器的寬度

-1

我正在試圖使圖像分辨率寬度決定容器的寬度。訣竅是，當p元素比圖像更寬時，整個容器就會伸展。我想要它做的是p元素尊重圖像的寬度，永遠不會比圖像更容易拉伸容器寬度。我不想設定一個固定的寬度。這裏有一個演示：讓img元素指示容器的寬度

#outer, #inner{ 
 
    border-width: 1px; 
 
    border-style: solid; 
 
    box-sizing: border-box; 
 
    padding: 5px; 
 
    text-align: center; 
 
} 
 
#outer { 
 
    border-color red; 
 
} 
 
#inner { border-color: red; display:inline-block; } 
 
img{max-width:100%;} 
 
.fixed { 
 
    width:300px; /*This is what i'm trying to avoid*/ 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>containers, img, p test</title> 
 
    </head> 
 

 
    <body> 
 
    <div id="outer"> 
 
     <div id="inner"> 
 
     <img src="http://i67.tinypic.com/24yy8hv.jpg" /> 
 
     <p> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc felis dui, varius in ligula id, ultricies rutrum lorem. Mauris felis mauris, pretium in leo ut, convallis tincidunt libero. Proin vel ultrices diam, nec rutrum purus. 
 
     </p> 
 
     </div> 
 
    </div> 
 
    <div id="outer"> 
 
     <div id="inner" class="fixed"> 
 
     <img src="http://i67.tinypic.com/24yy8hv.jpg" /> 
 
     <p> 
 
      This is how the first one is supposed to look. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc felis dui, varius in ligula id, ultricies rutrum lorem. Mauris felis mauris, pretium in leo ut, convallis tincidunt libero. Proin vel ultrices diam, nec rutrum purus. 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </body> 
 

 
</html>

來源

2017-07-20 MatiasP

更改CSS內聯塊將意味着元素與圖像的尺寸增加。

我添加了內聯塊，只是身份證img向你展示它如何工作。

#outer, #inner, #img { 
 
    border-width: 1px; 
 
    border-style: solid; 
 
    box-sizing: border-box; 
 
    padding: 5px; 
 
    text-align: center; 
 
} 
 
#outer { 
 
    border-color red; 
 
} 
 
#inner { border-color: red; display:inline-block; } 
 
#img { border-color: blue;display:inline-block;} 
 
img{max-width:100%;} 
 
.fixed { 
 
    width:300px; /*This is what i'm trying to avoid*/ 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <title>containers, img, p test</title> 
 
    </head> 
 

 
    <body> 
 
    <div id="outer"> 
 
     <div id="inner"> 
 
     <div id="img"> 
 
      <img src="http://i67.tinypic.com/24yy8hv.jpg" /> 
 
     </div> 
 
     <p> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc felis dui, varius in ligula id, ultricies rutrum lorem. Mauris felis mauris, pretium in leo ut, convallis tincidunt libero. Proin vel ultrices diam, nec rutrum purus. 
 
     </p> 
 
     </div> 
 
    </div> 
 
    <div id="outer"> 
 
     <div id="inner" class="fixed"> 
 
     <div id="img"> 
 
      <img src="http://i67.tinypic.com/24yy8hv.jpg" /> 
 
     </div> 
 
     <p> 
 
      This is how the fist one is supposed to look. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc felis dui, varius in ligula id, ultricies rutrum lorem. Mauris felis mauris, pretium in leo ut, convallis tincidunt libero. Proin vel ultrices diam, nec rutrum purus. 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </body> 
 

 
</html>

希望這是你所追求的。

來源

2017-07-20 00:29:36 Syfer

不，不是，對不起。我想要圖像本身的分辨率來確定其容器的寬度。它默認會這樣做，除非p元素與圖像位於同一個容器中。在這種情況下，所有孩子的更廣泛的元素將決定容器的寬度，但這不是我想要的。我希望圖像確定而不是p元素，即使它更寬。編輯：我從演示中刪除了一個冗餘元素，使其更清晰。 – MatiasP

讓img元素指示容器的寬度

回答

相關問題