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を変更するには、要素は、画像の大きさに伴って増加を意味します。

どのように動作するかを示すために、id 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要素でコンテナの幅を指定しましょう

答えて

関連する問題