Como faço para rescindir automaticamente uma imagem para ajustar um contêiner 'div'?

StackOverflow https://stackoverflow.com/questions/3029422

  •  26-09-2019
  •  | 
  •  

Pergunta

Como você resgate automaticamente uma imagem grande para que ela se encaixe em um contêiner de menor largura, mantendo sua taxa de largura: altura?

Exemplo: Stackoverflow.com - Quando uma imagem é inserida no painel do editor e a imagem é muito grande para caber na página, a imagem é redimensionada automaticamente.

Foi útil?

Solução

Não aplique uma largura ou altura explícita na tag de imagem. Em vez disso, dê:

max-width:100%;
max-height:100%;

Também, height: auto; Se você deseja especificar apenas uma largura.

Exemplo: http://jsfiddle.net/xwrvxser/1/

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

.portrait {
    height: 80px;
    width: 30px;
}

.landscape {
    height: 30px;
    width: 80px;
}

.square {
    height: 75px;
    width: 75px;
}
Portrait Div
<div class="portrait">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Landscape Div
<div class="landscape">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Square Div
<div class="square">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Outras dicas

Objeto-ajuste

Acontece que há outra maneira de fazer isso.

<img style='height: 100%; width: 100%; object-fit: contain'/>

fará o trabalho. São coisas CSS 3.

Violino: http://jsfiddle.net/mbhb4/7364/

Atualmente, não há como fazer isso corretamente de maneira determinística, com imagens de tamanho fixo, como arquivos JPEGs ou PNG.

Para redimensionar uma imagem proporcionalmente, você precisa definir qualquer A altura ou largura para "100%", mas não ambos. Se você definir os dois como "100%", sua imagem será esticada.

Escolher se deve fazer altura ou largura depende da sua imagem e dimensões do contêiner:

  1. Se sua imagem e recipiente são "em forma de retrato" ou "a paisagem em forma de paisagem" (mais altos do que amplos ou mais largos do que são altos, respectivamente), então não importa qual altura ou largura são "%100" .
  2. Se sua imagem é retrato e seu recipiente é paisagem, você deve definir height="100%" na imagem.
  3. Se sua imagem for paisagem e seu recipiente é retrato, você deve definir width="100%" na imagem.

Se a sua imagem for um SVG, que é um formato de imagem vetorial de tamanho variável, você poderá ter a expansão para atender ao contêiner acontecer automaticamente.

Você só precisa garantir que o arquivo SVG não tenha nenhuma dessas propriedades definidas no <svg> marcação:

height
width
viewbox

A maioria dos programas de desenho de vetores definirá essas propriedades ao exportar um arquivo SVG; portanto, você precisará editar manualmente seu arquivo toda vez que exportar ou escrever um script para fazê -lo.

Aqui está uma solução que alinhará vertical e horizontalmente o seu IMG em uma div sem alongamento, mesmo que a imagem fornecida seja pequena ou grande demais para caber na div.

O conteúdo HTML:

<div id="myDiv">
  <img alt="Client Logo" title="Client Logo" src="Imagelocation" />
</div>

O conteúdo CSS:

#myDiv
{
  height: 104px;
  width: 140px;
}
#myDiv img
{
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  display: block;
}

A parte do jQuery:

var logoHeight = $('#myDiv img').height();
    if (logoHeight < 104) {
        var margintop = (104 - logoHeight) / 2;
        $('#myDiv img').css('margin-top', margintop);
    }

Simplifique!

Dê ao recipiente um fixo height E então para o img Marque dentro dele, defina width e max-height.

<div style="height: 250px">
     <img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>

A diferença é que você define o width para ser 100%, não o max-width.

Um lindo hack.

Você tem duas maneiras de tornar a imagem responsiva.

  1. Quando uma imagem é uma imagem de fundo.
#container{
    width: 300px;
    height: 300px;
    background-image: url(http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

<div id="container"><div>

Executá-lo aqui

Mas alguém deveria usar img tag para colocar imagens como é melhor do que background-image em termos de SEO Como você pode escrever palavra -chave no alt do img marcação. Então, aqui está você pode tornar a imagem responsiva.

  1. Quando a imagem está em img marcação.
#container{
    max-width: 400px;
    overflow: hidden;
}
img{
    width: 100%;
    object-fit: contain;
}

<div id="container">
   <img src="http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="your_keyword"/>
<div>

Executá-lo aqui

Confira minha solução: http://codepen.io/petethepig/pen/dvfsa

Está escrito em CSS puro, sem nenhum código JavaScript. Pode lidar com imagens de qualquer tamanho e qualquer orientação.

Dado tal HTML:

<div class="image">
  <div class="trick"></div>
  <img src="http://placekitten.com/415/200"/>
</div>

O código CSS seria:

.image {
  font-size: 0;
  text-align: center;
  width: 200px;  /* Container's dimensions */
  height: 150px;
}
img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
  max-width: 100%;
}
.trick {
  display: inline-block;
  vertical-align: middle;
  height: 150px;
}

Você pode definir a imagem como plano de fundo para uma div e depois usar o Propriedade do tamanho de fundo do CSS:

background-size: cover;

Será "Escala a imagem de fundo para ser o maior possível, para que a área de fundo seja completamente coberta pela imagem de fundo. Algumas partes da imagem de fundo podem não estar em vista na área de posicionamento de fundo" -- W3schools

Acabei de publicar um plugin jQuery que faz exatamente o que você precisa com muitas opções:

https://github.com/gestixi/image-scale

Uso:

Html

<div class="image-container">
    <img class="scale" data-scale="best-fit-down" data-align="center" src="img/example.jpg">
</div>

JavaScript

$(function() {
    $("img.scale").imageScale();
});

Esta solução não estica a imagem e preenche o contêiner inteiro, mas corta parte da imagem.

Html:

 <div><img src="/images/image.png"></div>

CSS:

div {
    width: 100%;
    height: 10em;
    overflow: hidden;

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

O seguinte funciona perfeitamente para mim:

img{
   height: 99999px;
   object-fit:contain;
   max-height: 100%;
   max-width: 100%;    
   display: block;
   margin: auto auto;
}

Eu tenho uma solução muito melhor sem a necessidade de qualquer JavaScript. É totalmente responsivo, e eu o uso muito. Muitas vezes, você precisa se ajustar a uma imagem de qualquer proporção a um elemento de contêiner com uma proporção especificada. E ter toda essa coisa totalmente responsiva é uma obrigação.

/* For this demo only */
.container {
  max-width: 300px;
  margin: 0 auto;
}
.img-frame {
  box-shadow: 3px 3px 6px rgba(0, 0, 0, .15);
  background: #ee0;
  margin: 20px auto;
}

/* This is for responsive container with specified aspect ratio */
.aspect-ratio {
  position: relative;
}
.aspect-ratio-1-1 {
  padding-bottom: 100%;
}
.aspect-ratio-4-3 {
  padding-bottom: 75%;
}
.aspect-ratio-16-9 {
  padding-bottom: 56.25%;
}

/* This is the key part - position and fit the image to the container */
.fit-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  max-width: 80%;
  max-height: 90%
}
.fit-img-bottom {
  top: auto;
}
.fit-img-tight {
  max-width: 100%;
  max-height: 100%
}
<div class="container">

  <div class="aspect-ratio aspect-ratio-1-1 img-frame">
    <img src="//placehold.it/400x300" class="fit-img" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-4-3 img-frame">
    <img src="//placehold.it/400x300" class="fit-img fit-img-tight" alt="sample">
  </div>

  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/400x400" class="fit-img" alt="sample">
  </div>

  
  <div class="aspect-ratio aspect-ratio-16-9 img-frame">
    <img src="//placehold.it/300x400" class="fit-img fit-img-bottom" alt="sample">
  </div>
  
</div>

Você pode definir a largura máxima e a altura máxima de forma independente; A imagem respeitará a menor (dependendo dos valores e da proporção da imagem). Você também pode definir a imagem a ser alinhada como desejar (por exemplo, para uma imagem do produto em um fundo branco infinito, você pode posicioná -lo para centralizar o fundo facilmente).

Dê a altura e a largura necessárias para a sua imagem para a div que contém ou003Cimg> marcação. Não se esqueça de dar a altura/largura na tag de estilo adequado.

Nou003Cimg> tag, dê o max-height e max-width como 100%.

<div style="height:750px; width:700px;">
    <img alt="That Image" style="max-height:100%; max-width:100%;" src="">
</div>

Você pode adicionar os detalhes nas classes apropriadas depois de acertar.

O código abaixo está adaptado de respostas anteriores e é testado por mim usando uma imagem chamada storm.jpg.

Este é o código HTML completo para uma página simples que exibe a imagem. Isso funciona perfeito e foi testado por mim com www.resizemybrowser.com. Coloque o código CSS na parte superior do seu código HTML, embaixo da seção da cabeça. Coloque o código da imagem onde quiser a imagem.

<html>
    <head>
        <style type="text/css">
            #myDiv
            {
                  height: auto;
                  width: auto;
            }
            #myDiv img
            {
                max-width: 100%;
                max-height: 100%;
                margin: auto;
                display: block;
            }
        </style>
    </head>

    <body>
        <div id="myDiv">
            <img src="images/storm.jpg">
        </div>
    </body>
</html>

Você tem que dizer ao navegador a altura de onde você está colocando:

.example {
    height: 220px; /* DEFINE HEIGHT */
    background: url('../img/example.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

Centrei e escalei proporcionalmente uma imagem dentro de um hiperlink horizontal e verticalmente desta maneira:

#link {
    border: 1px solid blue;
    display: table-cell;
    height: 100px;
    vertical-align: middle;
    width: 100px;
}
#link img {
    border: 1px solid red;
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 60px;
    max-width: 60px;
}

Foi testado no Internet Explorer, Firefox e Safari.

Mais informações sobre centralização são aqui.

A resposta aceita de Thorn007 não funciona quando A imagem é muito pequena.

Para resolver isso, adicionei um fator de escala. Dessa forma, aumenta a imagem e preenche o contêiner Div.

Exemplo:

<div style="width:400px; height:200px;">
  <img src="pix.jpg" style="max-width:100px; height:50px; transform:scale(4); transform-origin:left top;" />
</div>

Notas:

  1. Para o webkit, você deve adicionar -webkit-transform:scale(4); -webkit-transform-origin:left top; no estilo.
  2. Com um fator de escala de 4, você tem max-lar = 400/4 = 100 e max-hight = 200/4 = 50
  3. Uma solução alternativa é definir a largura máxima e a altura máxima em 25%. É ainda mais simples.
<style type="text/css">
    #container{
        text-align: center;
        width: 100%;
        height: 200px; /* Set height */
        margin: 0px;
        padding: 0px;
        background-image: url('../assets/images/img.jpg');
        background-size: content; /* Scaling down large image to a div */
        background-repeat: no-repeat;
        background-position: center;
    }
</style>

<div id="container>
    <!-- Inside container -->
</div>

Editar: O posicionamento anterior de imagem baseado em mesa teve problemas no Internet Explorer 11 (max-height não funciona display:table elementos). Eu o substituí por posicionamento baseado em linha, que não apenas funciona bem no Internet Explorer 7 e no Internet Explorer 11, mas também requer menos código.

Aqui está minha opinião sobre o assunto. Só funcionará se o contêiner tiver um tamanho especificado (max-width e max-height Não parece se dar bem com recipientes que não têm tamanho de concreto), mas escrevi o conteúdo do CSS de uma maneira que permita que ele seja reutilizado (adicione picture-frame classe e px125 classe de tamanho para o seu contêiner existente).

Em CSS:

.picture-frame
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.picture-frame.px125
{
    width: 125px;
    height: 125px;
    line-height: 125px;
}

.picture-frame img
{
    margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}

E em HTML:

<a href="#" class="picture-frame px125">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>

Demonstração 

/* Main style */

.picture-frame
{
    vertical-align: top;
    display: inline-block;
    text-align: center;
}

.picture-frame.px32
{
    width: 32px;
    height: 32px;
    line-height: 32px;
}

.picture-frame.px125
{
    width: 125px;
    height: 125px;
    line-height: 125px;
}

.picture-frame img
{
    margin-top: -4px; /* Inline images have a slight offset for some reason when positioned using vertical-align */
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    border: 0; /* Remove border on images enclosed in anchors in Internet Explorer */
}

/* Extras */

.picture-frame
{
    padding: 5px;
}

.frame
{
    border:1px solid black;
}
<p>32px</p>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
    <img src="http://i.imgur.com/BDabZj0.png"/>
</a>
<p>125px</p>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
    <img src="http://i.imgur.com/BDabZj0.png"/>
</a>

Editar: Possível melhoria adicional usando JavaScript (Imagens de Upscaling):

function fixImage(img)
{
    var $this = $(img);
    var parent = $this.closest('.picture-frame');
    if ($this.width() == parent.width() || $this.height() == parent.height())
        return;

    if ($this.width() > $this.height())
        $this.css('width', parent.width() + 'px');
    else
        $this.css('height', parent.height() + 'px');
}

$('.picture-frame img:visible').each(function
{
    if (this.complete)
        fixImage(this);
    else
        this.onload = function(){ fixImage(this) };
});

Como respondeu aqui, você também pode usar vh unidades em vez de max-height: 100% Se não funcionar no seu navegador (como o Chrome):

img {
    max-height: 75vh;
}

Eu vejo que muitas pessoas são sugestões Objeto-ajuste o que é uma boa opção. Mas se você quiser trabalhar em navegadores mais antigos também, há outra maneira de fazê -lo facilmente.

Por favor, consulte minha resposta aqui:Ou seja, a correção de borda para o objeto de ajuste: capa;

É bastante simples. A abordagem que adotei foi posicionar a imagem dentro do recipiente com absoluto e depois coloque -o bem no centro Usando a combinação: 

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Uma vez que está no centro, eu dou à imagem, 

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

Isso faz com que a imagem obtenha o efeito do objeto de ajuste: capa.

Aqui está uma demonstração da lógica acima.

https://jsfiddle.net/furqan_694/s3xle1gp/

Essa lógica funciona em todos os navegadores.

Uma solução simples (correção de 4 etapas !!) que parece funcionar para mim está abaixo. O exemplo usa a largura para determinar o tamanho geral, mas você também pode girar para usar a altura.

  1. Aplique o estilo CSS no recipiente de imagem (por exemplo,u003Cimg> )
  2. Defina a propriedade de largura para a dimensão que você deseja
    • Para dimensões, use % Para tamanho relativo, ou autoscaling (com base em contêiner ou exibição de imagem)
    • Usar px (ou outro) para uma dimensão estática ou definida
  3. Defina a propriedade de altura para ajustar automaticamente, com base na largura
  4. DESFRUTAR!

Por exemplo,

<img style="width:100%; height:auto;"
    src="https://googledrive.com/host/0BwDx0R31u6sYY1hPWnZrencxb1k/thanksgiving.png"
/>

Todas as respostas fornecidas, incluindo a aceita, trabalho só sob a suposição de que o div O invólucro é de tamanho fixo. Então é assim que fazer qualquer que seja o tamanho do div O invólucro é e isso é muito útil se você desenvolver uma página responsiva:

Escreva essas declarações dentro do seu DIV Seletor:

width: 8.33% /* Or whatever percentage you want your div to take */
max-height: anyValueYouWant /* (In px or %) */

Em seguida, coloque essas declarações dentro do seu IMG Seletor:

width: "100%" /* Obligatory */
max-height: anyValueYouWant /* (In px or %) */

MUITO IMPORTANTE:

O valor de maxHeight deve ser o mesmo para ambos DIV e IMG Seletores.

Corrigi esse problema usando o seguinte código:

<div class="container"><img src="image_url" /></div>

.container {
    height: 75px;
    width: 75px;
}

.container img {
    object-fit: cover;
    object-position: top;
    display: block;
    height: 100%;
    width: 100%;
}

Uma solução simples é usar o Flexbox. Defina o CSS do contêiner para:

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    overflow: hidden;
    /* Any custom height */
}

Ajuste a largura da imagem contida para 100% e você deve obter uma imagem centrada no recipiente com as dimensões preservadas.

Se você estiver usando o bootstrap, você só precisa adicionar o img-responsive classe para o img marcação:

<img class="img-responsive" src="img_chania.jpg" alt="Chania">

Imagens de bootstrap

A solução é fácil com um pouco de matemática ...

Basta colocar a imagem em uma div e, em seguida, no arquivo HTML, onde você especifica a imagem. Defina os valores de largura e altura em porcentagens usando os valores de pixel da imagem para calcular a proporção exata de largura e altura.

Por exemplo, digamos que você tenha uma imagem que tenha uma largura de 200 pixels e uma altura de 160 pixels. Você pode dizer com segurança que o valor da largura será 100%, porque é o valor maior. Para calcular o valor da altura, você simplesmente divide a altura pela largura que fornece o valor percentual de 80%. No código, será algo assim ...

<div class="image_holder_div">
    <img src="some_pic.png" width="100%" height="80%">
</div>

Verifique minha resposta, Torne uma imagem mais simples - maneira mais simples - 

img{
    width: 100%;
    max-width: 800px;
}

A maneira mais simples de fazer isso é usando object-fit:

<div class="container">
  <img src="path/to/image.jpg">
</div>

.container{
   height: 300px;
}

.container img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

Se você estiver usando o bootstrap, basta adicionar o img-responsive classe e mudança para

.container img{
    object-fit: cover;
}

Ou você pode simplesmente usar:

background-position:center;
background-size:cover;

Agora a imagem ocupará todo o espaço da div.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top