Wie das Bild reaktionsschnell Weg innerhalb einer div

Mein code ist wie Folgt:

<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>

Wie kann ich das Bild responsive für Mobile(360X640px) und iPad(768X1024px)?
Können Sie mir bitte den CSS-Code?

Ich Ihnen zwei Bilder in der Mobilen und in Vier iPad in eine Zeile!!

legen Sie die Breite und Höhe in Prozent.
Bitte Lesen Sie den code!!
plz mir sagen, welchen code??
geben Sie zwei Bilder in der Mobilen und in Vier iPad in eine Zeile!! und das ist das Problem!!!!

InformationsquelleAutor Kusumakar Pant | 2014-07-11

30

Hier ist der code, den Sie benötigen, zu Folgen :
```
img {
    max-width: 100%;
    height: auto;
    }
```
Finden : http://html5hub.com/html5-picture-element/

InformationsquelleAutor Sulthan Allaudeen
3

Entfernen width und height Attribut aus img - tag, und fügen Sie in die CSS-Datei für dieses Bild max-width:100%; width:100%;

InformationsquelleAutor Anon
3

dieser Einstellung wird das Bild, das Sie einstellen wollen, als Hintergrundbild in einem div und geben den hintergrund Größe als cover
```
background-image: url('YOUR URL');
background-size: cover;
```
InformationsquelleAutor Naseeruddin V N

legen Sie Breite und Höhe in Prozent

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

verwenden Sie den media-query

/* Landschaft */

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

 //use your style for landscape
                                          }

/* Portrait (d.h. schmalen viewport) */

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

//your style for portrait
                                          }

Ich muss zwei Bilder in der Mobilen und in Vier iPad in eine Zeile!!

InformationsquelleAutor Arunkumar

Mithilfe von Medienabfragen können Sie teilen Sie die Bilder, wie Sie möchten.

.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

InformationsquelleAutor Suresh Ponnukalai

 <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>

Demo

jsfiddle Demo ...jsfiddle.net/maulikshekhada/TDfF5

InformationsquelleAutor Maulik Patel

    <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>

Können Sie entfernen Sie die Grenze.

Wenn Sie die Grenze entfernen, dann können Sie mit Breite 25% für 4 Zeilen in einer Zeile und 50% für die 2 Zeilen in eine Zeile.

InformationsquelleAutor Subrata Mallik

CSS:

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

HTML:

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

Vielleicht ist es eine gute Antwort

InformationsquelleAutor Adascript

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.