css - 如何在制作响应式图像网格时保持图像的相同纵横比

Question

在这里，我使用 masonry 图像网格制作了响应式图像网格。我有保持图像相同纵横比的问题。我感谢任何建议。我工作演示:Fiddle

HTML

<div class="toplist-container">

                        <div class="grid">
                            <div class="grid-sizer"></div>
                            <!--  <div class="grid-item"></div>-->
                            <div class="grid-item grid-item--width2 grid-item--height4">
                                <div class="transparent">
                                    <span class="toplist-title">Top Content</span><img
                                        src="http://freeimages.imagestocks.in/best-pictures/vintage-tumblr-photography/tumblr_mhmyc4p0zD1qgl14po1_500.jpg" class="image">
                                </div>
                            </div>
                            <div class="grid-item grid-item--height2 grid-item--width2">
                                <div class="transparent">
                                    <span class="toplist-title">Sweden Top 10</span><img
                                        src="https://lh3.googleusercontent.com/-Oa2z9ZFDAS8/VgFilUCLMgI/AAAAAAAAAlg/Y50I4u5kGjc/s0-d/32203-Vintage-Tree-Flowers_zps727b7dac.png" alt="list2"
                                        class="image" />
                                </div>
                            </div>
                            <div class="grid-item grid-item--height2 grid-item--width1"></div>
                            <div class="grid-item grid-item--height2 grid-item--width1">
                                <div class="transparent">
                                    <span class="toplist-title">USA Top 10</span><img
                                        src="http://img06.deviantart.net/bcb6/i/2013/150/c/c/eiffel_vintage_by_santidesigns-d677kni.jpg" alt="list3"
                                        class="image" />
                                </div>
                            </div>
                            <div class="grid-item grid-item--height grid-item--width1">
                                <div class="transparent">
                                    <span class="toplist-title">Most Viewed</span><img
                                        src="http://s9.favim.com/orig/130809/beautiful-nice-photography-pink-Favim.com-841516.jpg" alt="list3"
                                        class="image" />
                                </div>
                            </div>
                            <div class="grid-item grid-item--height grid-item--width1">
                                <div class="transparent">
                                    <span class="toplist-title">Top Tags</span><img
                                        src="http://40.media.tumblr.com/tumblr_m91u8uVtaO1ry25g5o1_500.jpg" alt="toplist6" class="image">
                                </div>
                            </div>
                            <div
                                class="grid-item--width2 grid-item--height4 pull-right grid-img">
                                <div class="transparent">
                                    <span class="toplist-title">New Releases</span><img
                                        src="https://40.media.tumblr.com/560074e3f641d882609755021c086cdd/tumblr_ng2hrolqZA1rtrl9eo1_500.jpg" alt="list3" class="image" />
                                </div>
                            </div>
                            <div class="grid-item grid-item--width2">
                                <div class="relative">
                                    <span class="toplist-title">Top Users</span>
                                </div>
                                <div class="user-container">
                                    <div class="img-container">
                                        <img class="pic" alt="Sana Mistry" src="assets/img/person.png"
                                            height="50" width="50">
                                        <div class="user-name">Sana Mistry</div>
                                        <div class="followers">8901 followers</div>
                                    </div>
                                    <div class="img-container">
                                        <img class="pic" alt="Ketty Pery" src="assets/img/person.png"
                                            height="50" width="50">
                                        <div class="user-name">Ketty Pery</div>
                                        <div class="followers">8909 followers</div>
                                    </div>
                                    <div class="img-container">
                                        <img class="pic" alt="Chrlie Shaha"
                                            src="assets/img/person.png" height="50" width="50">
                                        <div class="user-name">Charlie Shah</div>
                                        <div class="followers">8901 followers</div>
                                    </div>
                                    <div class="img-container">
                                        <img class="pic" alt="Kim  K" src="assets/img/person.png"
                                            height="50" width="50">
                                        <div class="user-name">Kim K</div>
                                        <div class="followers">1223 followers</div>
                                    </div>
                                </div>
                            </div>
                            <div class="grid-item grid-item--width1">
                                <div class="transparent">
                                    <span class="toplist-title">Global Top 10</span><img
                                        src="http://41.media.tumblr.com/f14e437cd69f1072a4c2912e18476ed7/tumblr_n22sodHfGq1tv6mtqo1_500.jpg" alt="list3" class="image" />
                                </div>
                            </div>
                            <div class="grid-item grid-item--width1"></div>
                        </div>


                    </div>
                </div>

如果有人了解其他可以解决宽高比问题的图像网格插件。

Answer 1

试试这个

img{
display:block;
height:auto;
width:100%;
}