2-colonne CSS responsive mise en page avec une image réactive

J'ai regardé à travers comme beaucoup de posts sur ce sujet que je peux trouver, mais aucun d'eux de résoudre cette énigme. Est-il possible d'avoir une colonne à gauche avec le texte et une colonne de droite avec une image qui va circuler dans une seule colonne lorsque redimensionnée, avec un redimensionnement automatique de l'image?

À l'aide d'un max-width de 100% sur img, l'image sensible et redimensionnement automatique. Cependant, le redimensionnement automatique ne fonctionne pas dans un tableau ou d'un pourcentage ou d'un flotteur appliquée à la div autour d'elle. Donc, CSS 2, colonne mise en page qui contient soit un float ou un pourcentage à l'image de la défaite de l'redimensionnement d'image.

Autres que l'utilisation d'une grille, quelqu'un aurait-il une solution pour cela?

Créer un JSfidle, je vais vous montrer comment.

OriginalL'auteur Charles | 2014-01-21

  1. 26

    Si vous flotter le div parent de l'image, il ne devrait pas l'effet de la réactivité de la largeur de l'image.

    HTML

    <div class="group">
    <div class="left">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima corporis voluptates repellat ullam labore qui voluptatum error nesciunt ratione dolorem fugiat veritatis ipsum nobis eius dicta est obcaecati ab animi illum molestias accusamus cum laboriosam magni recusandae earum unde fuga deserunt laudantium facere ducimus rerum tempora pariatur consectetur iste nulla a aut ea sit nam autem doloremque iusto exercitationem voluptatem facilis eos quasi. Mollitia sequi assumenda corrupti repellendus ex amet reprehenderit animi illum ducimus totam unde quia distinctio quam velit magnam. Voluptatibus dolores natus sint enim fugiat. Sapiente voluptates enim officiis. Iste repudiandae illo nulla sed nam a ratione iure?</p>
    </div>
    <div class="right">
        <img src="http://lorempixel.com/640/480/" alt="" />
    </div>
</div>

    CSS

    .left {
    float: left;
    width: 50%;
}
.right {
    float: right;
    width: 50%;
}
.group:after {
    content:"";
    display: table;
    clear: both;
}
img {
    max-width: 100%;
    height: auto;
}
@media screen and (max-width: 480px) {
    .left, 
    .right {
        float: none;
        width: auto;
    }
}

    Démo

    C'est super, merci. Sauf pour ajouter des marges gauche et droite, j'ai dû changer les largeurs à 45% pour la gauche et la droite.
    ne fonctionne pas sous IE sur windows phone!
    Salut @TomSawyer, cela fonctionne sur n'importe quel navigateur qui prend en charge les requêtes de média. L'exemple de requête ci-dessus sera déclenchée lorsque la fenêtre d'affichage de la largeur est 480px ou moins. Le test que vous avez essayé, était de la fenêtre d'affichage de la largeur de moins de 481px? N'est que la version d'IE de soutien media queries? À partir d'une recherche rapide j'ai trouvé certaines versions d'IE sur Windows Phone ont eu des bugs qui cause le navigateur d'ignorer les media queries.

    OriginalL'auteur 3dgoo