Исправлено изображение справа от реагирующего div

Question

Я хотел бы разместить изображение фиксированной ширины на справа гибкого div, содержащего текст, но у меня возникают проблемы при изменении размера. Я хочу, чтобы изображение упало ниже текст из медиа-запроса, а затем быть гибким с текстом.

This is a hacked together jsfiddle example того, чего бы я хотел достичь. У меня есть два элемента img, в которые я включаю и выключаю видимость в зависимости от ширины экрана, которая кажется грязной. Просто измените размер раздела html, чтобы узнать, чего я пытаюсь достичь.

Вот выше пример кода:

<div class="container"> 
<div class="content"> 
     <img class="right" src="http://i.imgur.com/ADL7NJ3b.jpg" alt="" /> 
     <h1>Some header</h1> 
     <p><strong>This text will wrap at the moment, but I want it to stick to it's column rather that wrap aroung the image.</strong> 
     <br> 
     <br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga corrupti mollitia quibusdam nisi in natus aut nesciunt ipsam enim similique quaerat quisquam voluptates adipisci quas quam culpa voluptate! Eaque ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio inventore distinctio expedita suscipit rem tenetur magni adipisci ex ab neque aliquid minus reiciendis quibusdam dignissimos ullam. Facilis officiis sint culpa?</p> 
     <img class="non-right" src="http://i.imgur.com/ADL7NJ3b.jpg" alt="" /> 
    </div> 
</div> 

Надеется, что имеет смысл? Спасибо за любую помощь!

Answer 1

мне довелось достичь подобного эффекта с помощью display: table-cell; на изображение и текст. Насколько я понял из примера вашей скрипки - вам не нужен текст для перекрытия изображения, но вместо этого используйте его столбец. Так вот мы идем:

HTML: 
<div class="content"> 
    <div class="wrap"> 
     <h1>Some header</h1> 
     <p><strong>This text will wrap at the moment, but I want it to stick to it's column rather that wrap aroung the image.</strong> 
      <br /> 
      <br />Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga corrupti mollitia quibusdam nisi in natus aut nesciunt ipsam enim similique quaerat quisquam voluptates adipisci quas quam culpa voluptate! Eaque ut. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio inventore distinctio expedita suscipit rem tenetur magni adipisci ex ab neque aliquid minus reiciendis quibusdam dignissimos ullam. Facilis officiis sint culpa?</p> 
    </div> 
    <img class="right" src="http://i.imgur.com/ADL7NJ3b.jpg" alt="" /> 
</div> 

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

CSS: 
.content { 
    display: table; 
} 
.wrap { 
    display: table-cell; 
    vertical-align: top; 
} 

.right { 
    display: table-cell; 
    vertical-align: top; 
} 

Этот CSS will not work in IE7. Все, что осталось сделать, - это вернуть изображение в исходное положение на нижних экранах.

CSS: 
@media only screen and (max-width: 400px) { 
    .content, 
    .wrap, 
    .right { 
     display: block; 
    } 
} 

Рабочий пример онлайн можно посмотреть здесь: http://jsfiddle.net/skip405/UBQrC/

Answer 2

Применить новое изображение/маленькое изображение. Я использовал это на своем сайте.

@media screen and (min-width:300px) and (max-width:600px) { /*Apply small Image using CSS*/} 
    @media screen and (min-width:601px) and (max-width:1000px) { /* Apply large image **/} 

ИЛИ

Смотрите эту ссылку. Это может быть полезно.

StackOverFlow