web-dev-qa-db-ja.com

div内で画像をレスポンシブにする方法

私のコードは次のとおりです：

<div class="abc">
    <div class="bcd">
        <a href="#">
            <img class="img1" width="50" height="50"/>
        </a>
        <a>
            <h3>Some Text</h3>
        </a> 
    </div>
    <div class="bcd">
        <a href="#">
            <img class="img1" width="50" height="50"/>
        </a>
        <a>
            <h3>Some Text</h3>
        </a> 
    </div>
    <div class="bcd">
        <a href="#">
            <img class="img1" width="50" height="50"/>
        </a>
        <a>
            <h3>Some Text</h3>
        </a> 
    </div>
    <div class="bcd">
        <a href="#">
            <img class="img1" width="50" height="50"/>
        </a>
        <a>
            <h3>Some Text</h3>
        </a> 
    </div>
</div>

モバイル（360X640px）およびiPad（768X1024px）で画像をレスポンシブにするにはどうすればよいですか？ CSSコードを教えてください。

モバイルでは2つの画像を、iPadでは4つの画像を1行で提供する必要があります。

cssimageresponsive-design
11
Kusumakar Pant

従う必要があるコードは次のとおりです。

img {
    max-width: 100%;
    height: auto;
    }

参照： http://html5hub.com/html5-picture-element/

30
Sulthan Allaudeen

widthタグからheightおよびimg属性を削除し、この画像のCSSファイルに追加しますmax-width:100%; width:100%;

3
Anon

この設定は、divの背景画像として設定する画像を設定し、カバーとして背景サイズを設定します。

background-image: url('YOUR URL');
background-size: cover;
3
Naseeruddin V N
 <style>
        html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, Ruby, section, summary,time, mark, audio, video {  margin: 0;  padding: 0; border: 0;  font-size: 100%;    font: inherit;  vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {    display: block;}body {  line-height: 1;}ol, ul {    list-style: none;}blockquote, q {   quotes: none;}blockquote:before, blockquote:after,q:before, q:after {   content: '';    content: none;}table {  border-collapse: collapse;  border-spacing: 0;}
        .container .bcd{float: left;position: relative;}
        .container .bcd div{background-color: #fff;border: 1px solid #e4e4e4;border-radius: 5px;margin-top: 10px;min-height: 100px;}
        .container .bcd div img{border-radius: 5px 5px 0 0;height: auto;width: 100%;}
        .container .bcd div a.bottom{background: none repeat scroll 0 0 #fff;bottom: 4px;color: #000;font-size: 14px;padding: 9px 0 5px;position: relative;width: 100%;display: inline-block;}
        .container .bcd div a.bottom h3{padding: 0 10px;}
        @media (max-width: 700px) {
            .bcd{width: 100%;}
            .bcd div{margin: 0 10px}
        }
        @media (min-width: 700px) {
            .bcd {width: 50%;}
            .bcd:nth-child(odd) div {margin-left: 10px;margin-right: 5px;}
            .bcd:nth-child(even) div {margin-left: 5px;margin-right: 10px;}
        }
    </style>

<div class="container">
        <div class="bcd">
            <div>
                <a href="#">
                    <img  class="img1" width="50" height="50"/>
                </a>
                <a class="bottom"><h3>Some Text</h3></a>
            </div>
        </div>
        <div class="bcd">
            <div>
                <a href="#">
                    <img  class="img1" width="50" height="50"/>
                </a>
                <a class="bottom"><h3>Some Text</h3></a>
            </div>
        </div>
        <div class="bcd">
            <div>
                <a href="#">
                    <img  class="img1" width="50" height="50"/>
                </a>
                <a class="bottom"><h3>Some Text</h3></a>
            </div>
        </div>
        <div class="bcd">
            <div>
                <a href="#">
                    <img class="img1" width="50" height="50"/>
                </a>
                <a class="bottom"><h3>Some Text</h3></a>
            </div>
        </div>
        <div class="bcd">
            <div>
                <a href="#">
                    <img class="img1" width="50" height="50"/>
                </a>
                <a class="bottom"><h3>Some Text</h3></a>
            </div>
        </div>
        <div class="bcd">
            <div>
                <a href="#">
                    <img  class="img1" width="50" height="50"/>
                </a>
                <a class="bottom"><h3>Some Text</h3></a>
            </div>
        </div>
        <div class="bcd">
            <div>
                <a href="#">
                    <img  class="img1" width="50" height="50"/>
                </a>
                <a class="bottom"><h3>Some Text</h3></a>
            </div>
        </div>
        <div class="bcd">
            <div>
                <a href="#">
                    <img class="img1" width="50" height="50"/>
                </a>
                <a class="bottom"><h3>Some Text</h3></a>
            </div>
       </div>
        <div style="clear: both;margin: 0px;padding: 0px;"></div>
    </div>

デモ

2
Maulik Patel

メディアクエリを使用すると、好きなように画像を分割できます。

.abc{padding:0; margin:0; box-sizing:border-box; width:100%;}
.bcd{display:inline-block;width:24%;}
@media all and (max-width: 360px){
   .bcd
   {
    display:inline-block;
    width:49%;
   }
}

[〜＃〜] demo [〜＃〜]

2
Suresh Ponnukalai

幅と高さをパーセンテージで設定します

  <img class="img1" width="100%" height="100%"/>

メディアクエリを使用する

/ *風景* /

@media screen and (min-aspect-ratio: 1/1) {

 //use your style for landscape
                                          }

/ *ポートレート（狭いビューポート）* /

@media screen and (max-aspect-ratio: 1/1) {

// your style for portrait
                                          }
2
Arunkumar
    <style>
    @media only screen and (max-width: 1024px) {    
        .abc .bcd{max-width:100%;height:auto;border:1px solid #ff0000;width:24%;display:inline-block;}
        .abc .bcd a img{width:100%;height:auto;}
    }

    @media only screen and (max-width: 640px) { 
        .abc .bcd{max-width:100%;height:auto;border:1px solid #ff0000;width:48%;display:inline-block;}
        .abc .bcd a img{width:100%;height:auto;}
    }
    </style>

境界線を削除できます。

境界線を削除する場合、1行の4行に25％、1行の2行に50％の幅を使用できます。

0
Subrata Mallik

CSS：

img {
  max-width: 100%;
  max-height: 100%;
}

HTML：

<img class="img" src="image.png">
0
Adascript