Можно ли скрыть элемент, если он не соответствует доступной ширине, используя только css?

У меня заголовок и изображение, которое должно быть горизонтально выложено на абсолютно позиционированном div. Я показываю текст в subdiv с фиксированной шириной. Я пытаюсь скрыть изображение, если оно не помещается в абсолютно позиционируемый контейнер с помощью 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>

Ответы

Ответ 1

Я нашел, как это можно сделать. Если я использую display:block на .container и float:left во внутренних контейнерах, изображение будет обернуто, если он не соответствует ширине. И если я использую overflow: hidden, изображение будет перемещено под текстом и скрыто.

Вот скрипка, которая доказывает, что этот трюк работает: http://jsfiddle.net/8r72g/8/

Ответ 2

Я могу подумать о двух методах, которые вы могли бы использовать для решения этой проблемы. Первым было бы установить максимальную ширину для любых изображений контейнера, однако это не скроет изображение:

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

вторым вариантом будет использование гибкого дизайна на основе размера экрана. Подобно тому, о чем упоминал Танос, но в той же таблице стилей. Однако в вашем вопросе не упоминается изменение размера окна, просто изменение размера изображения, поэтому это, вероятно, не то, что вы хотите...

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

Третьим вариантом будет использование javascript, как вы упомянули... Я думаю, что это был бы самый простой метод.

взгляните на http://css-tricks.com/forums/topic/condition-resize-image-based-on-width/

Ответ 3

Что вам нужно будет сделать, это в основном вызвать css файл, когда размер экрана слишком мал или слишком велик, чтобы скрыть/показать вещи, которые не будут вписываться в экран.

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

Ответ 4

Если вы хотите скрыть переполненные элементы и расширить оставшиеся элементы, чтобы они были плотно уложены, вы можете расширить Shalom Aleichem, чтобы сделать трюк:

ul {
  border: 1px solid red;
  width: 350px;
  height: 100px;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

ul > li  {
  border: 1px solid blue;
  display: block;
  flex: 1 0 100px;
  height: 100px;
  box-sizing: border-box;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
</ul>