Jak dopasować cały obraz do div, które mają swoje wymiary

Question

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

Chcę zmniejszyć mój obraz, aby zmieścił się w div. Jak mogę to zrobić z jquery lub css, bez mannualy pisania tak jak wcześniej.

p.s. Chcę zachować stosunek szerokości do wysokości:

Answer 1

Można ustawić background-image z JQuery i używać background-size: cover; na 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>

Answer 2

Ustawiasz maksymalne wymiary obrazu, aby wyświetlał się tylko we własnej rozdzielczości. Dopuszczenie, by szerokość była wielkością automatyczną, zachowa proporcje.

To powinno działać:

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

Jak widać obraz będzie poza div nawet pomimo to nie mogę być postrzegane.

Answer 3

Jeśli chcesz zachować wymiar szerokości obrazu powinna auto.

.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%; 
} 

Edytowałem twój kod. Można kasy https://jsfiddle.net/dtv6bk75/

Answer 4

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

Pierwszy dać, że dział odpowiedni rozmiar, jak chcesz i nie dać 100% szerokości obrazu.

Answer 5

Myślę, że object-fit jest tym, czego szukasz. Bądź świadomy obsługi przeglądarki 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" />