18

絶対位置の div に水平に配置する必要があるヘッダーと画像があります。固定幅のサブディビジョンにテキストを表示しています。CSS3 を使用して絶対配置コンテナーに画像が収まらない場合は画像を非表示にしようとしていますが、できません。JSでできることは知っていますが、CSS3の方法はありますか?

.container {
  display: -ms-flexbox;
  -ms-flex-direction: row;
  -ms-flex-pack: justify;
  overflow-x: hidden;
  position: absolute;
  left: 60px;
  right: 60px;
  bottom: 0px;
  height: 400px;
}

.part-one {
  left: 0px;
  bottom: 100px;
  width: 300px;
  font-size: 22pt;
  color: white;
  min-width: 300px;
}

.part-two {
  max-width: 400px;
  width: 400px;
  min-width: 50%;
}

.header {
  font-size: 50pt;
  color: blue;
  margin-bottom: 10px;
}
<div style="position: relative; width: 500px; height:500px;">
  <div class="container">
    <div class="part-one">
      <h1 class="header">This is some header</h1>
    </div>
    <div class="utilizationContainer" class="part-two">
      <img src="">
    </div>
  </div>
</div>

ここにフィドルがあります：http://jsfiddle.net/8r72g/5/

IE10だけで動くならOKです。

4

4 に答える 4

12

これを行う方法を見つけました。display:block内容器の上.containerや中に使うfloat:leftと幅が合わないと画像が折り返されてしまいます。を使用するoverflow: hiddenと、画像がテキストの下に移動して非表示になります。

このトリックが機能することを証明するフィドルは次のとおりです: http://jsfiddle.net/8r72g/8/

于 2013-09-13T23:08:22.657 に答える
2

これを解決するために使用できる 2 つの方法を考えることができます。1 つ目は、コンテナーの画像に最大幅を設定することですが、これは画像を非表示にしません。

.container img{max-width:100%;}

2 番目のオプションは、画面サイズに基づくレスポンシブ デザインを使用することです。サノスが言及したものと似ていますが、同じスタイルシート内にあります。ただし、あなたの質問では、ウィンドウ サイズの変更、単に画像サイズの変更について言及していないため、これはおそらくあなたが望むものではありません...

@media screen and (max-width:500px){    
    .container img{display:none;}
}

あなたが言及したように、3番目のオプションはjavascriptを使用することです...これが最も簡単な方法だと思います。

見てください - http://css-tricks.com/forums/topic/conditionally-resize-image-based-on-width/

于 2013-09-13T01:22:02.723 に答える
0

画面に収まらないものを非表示/表示するには、画面サイズが小さすぎるか大きすぎる場合に、基本的に css ファイルを呼び出す必要があります。

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
于 2013-09-13T01:05:36.383 に答える