Wie gesamte Bild in zu div passen die

<div class = "container"> 
    <div class = "row"> 
    <small>Original picture size is 876x493, I resize it to:</small> 
    <div class = "property"> 
     <img src = "http://a57.foxnews.com/global.fncstatic.com/static/managed/img/Leisure/2009/876/493/big-house-small-house.png?ve=1&tl=1"/> 
    </div> 
    <small>Result I want to get (in another way):</small> 
    <div class = "property"> 
     <img style = "max-width: 147%" src = "http://a57.foxnews.com/global.fncstatic.com/static/managed/img/Leisure/2009/876/493/big-house-small-house.png?ve=1&tl=1"/> 
    </div> 
    </div> 
</div>

https://jsfiddle.net/40ay7uco/Wie gesamte Bild in zu div passen die

seine Dimensionen habe ich möchte mein Bild zu reduzieren, es in div zu passen. Wie ich es mit jQuery oder CSS machen kann, ohne Mannuell zu schreiben wie ich es vorher getan habe.

p.s. Ich möchte das Verhältnis Breite: Höhe beibehalten

Quelle

2016-01-09 zhinyz

Set als Hintergrund https://jsfiddle.net/40ay7uco/1/ –

Statt max-height/max-width, einfach Höhe/Breite verwenden. Siehe hier: https://jsfiddle.net/40ay7uco/2/ – Phiter

@NenadVracar, vielen Dank für den Rat, aber Eigenschaften werden von PHP-Code angezeigt werden, so ist dieser Weg nicht für mich geeignet – zhinyz

können Sie setzen background-image mit JQuery und verwenden background-size: cover; auf property div

$('.property').each(function() { 
 
    var background = $(this).data('background'); 
 
    $(this).css('background-image', 'url('+background+')'); 
 
});

.property { 
 
    border: 3px solid white; 
 
    box-shadow: 0px 0px 5px #aaaaaa; 
 
    width: 270px; 
 
    height: 200px; 
 
    overflow: hidden; 
 
    background-size: cover; 
 
    background-position: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class = "container"> 
 
    <div class = "row"> 
 
    <small>Original picture size is 876x493, I resize it to:</small> 
 
    <div class = "property" data-background="http://a57.foxnews.com/global.fncstatic.com/static/managed/img/Leisure/2009/876/493/big-house-small-house.png?ve=1&tl=1"> 
 
    </div> 
 
    
 
    <div class = "property" data-background="http://placehold.it/350x150"> 
 
    </div> 
 
    
 
    <div class = "property" data-background="http://placehold.it/700x500/ffffff/000000"> 
 
    </div> 
 
</div>

Quelle

2016-01-09 15:30:35

Sie haben maximale Abmessungen für Ihr Bild festgelegt, sodass es nur in der eigenen Auflösung angezeigt wird. Wenn Sie die Breite als automatische Größe festlegen, bleibt das Verhältnis erhalten.

sollte diese Arbeit:

.property { 
 
    border: 3px solid white; 
 
    box-shadow: 0px 0px 5px #aaaaaa; 
 
    width: 270px; 
 
    height: 200px; /*This will keep aspect ratio for your image*/ 
 
    overflow: hidden; 
 
} 
 
.property img { 
 
    height: 100%; /*This will keep aspect ratio for your image*/ 
 
    width: auto; /*Not necessary since this is the default value*/ 
 
}

<div class = "container"> 
 
    <div class = "row"> 
 
    <div class = "property"> 
 
     <img src = "http://a57.foxnews.com/global.fncstatic.com/static/managed/img/Leisure/2009/876/493/big-house-small-house.png?ve=1&tl=1"/> 
 
    </div> 
 
    </div> 
 
</div>

Wie Sie das Bild außerhalb des div sehen wird sogar tho es gesehen werden kann nicht.

Quelle

2016-01-09 14:47:23 Phiter

Ich möchte Breite: Höhe Verhältnis halten – zhinyz

Oh ich sehe, lass mich überprüfen – Phiter

Ich habe meine Antwort bearbeitet, überprüfen Sie es. – Phiter

Wenn Sie behalten möchten Dimension die Breite des Bildes sollte automatisch.

.property { 
    border: 3px solid white; 
    box-shadow: 0px 0px 5px #aaaaaa; 
    width: 270px; 
    height: 200px; 
    overflow: hidden; 
} 

.property img { 
    max-width: 100%; /*Should remove*/ 
    max-height: 100%; /*Should remove*/ 
    width: auto; 
    height: 100%; 
}

Ich habe Ihren Code bearbeitet. Sie können https://jsfiddle.net/dtv6bk75/

Quelle

2016-01-09 14:57:44 vanhonit

<div id="img" style="width:50px;height:50px"> 
    <img src="http://s16.postimg.org/nhxsxl1hh/image.jpg" alt="" style="width:100%" /> 
</div>

Zuerst geben, dass div entsprechende Größe Kasse, wie Sie wollen und als Bild ein 100% Breite geben.

Quelle

2016-01-09 15:14:50

Ich denke, object-fit ist, was Sie suchen. Beachten Sie die Browserunterstützung tables.

jsfiddle

.object-fit { 
 
    width: 200px; /*any size*/ 
 
    height: 200px; /*any size*/ 
 
    object-fit: cover; /*magic*/ 
 
    border: 3px solid white; 
 
    box-shadow: 0px 0px 5px #aaaaaa; 
 
    box-sizing: border-box; 
 
}

<img class="object-fit" src="http://i.imgur.com/4fYhkO2.png" />

Quelle

2016-01-09 15:26:18 Stickers

Wie gesamte Bild in zu div passen die

Antwort

Verwandte Themen