O CSS força o redimensionamento da imagem e mantém a relação de aspecto

Estou trabalhando com imagens e enfrentei um problema com proporções de aspecto.

 

Como você pode ver, height e width já estão especificadas. Eu adicionei regra de CSS para imagens:

 img { max-width:500px; } 

Mas para https://stackoverflow.com/questions/12991351/css-force-image-resize-and-keep-aspect-ratio/big_image.jpg , recebo width=500 e height=600 . Como posso definir imagens para serem redimensionadas, mantendo suas proporções.

 img { display: block; max-width:230px; max-height:95px; width: auto; height: auto; } 
 

This image is originally 400x400 pixels, but should get resized by the CSS:

As soluções abaixo permitirão escalonar e reduzir a escala da imagem , dependendo da largura da checkbox pai.

Todas as imagens têm um contêiner pai com largura fixa apenas para fins de demonstração . Na produção, essa será a largura da checkbox pai.

Melhores Práticas (2018):

Essa solução informa ao navegador para renderizar a imagem com largura máxima disponível e ajustar a altura como uma porcentagem dessa largura.

 .parent { width: 100px; } img { display: block; width: 100%; height: auto; } 
 

This image is originally 400x400 pixels, but should get resized by the CSS:

Eu me esforcei bastante com esse problema e finalmente cheguei a essa solução simples:

 object-fit: cover; width: 100%; height: 250px; 

Você pode ajustar a largura e a altura para atender às suas necessidades, e a propriedade de ajuste do object fará o corte para você.

Felicidades.

A propriedade background-size é apenas> = 9, mas se estiver tudo bem com você, você pode usar um div com background-image e definir background-size: contain :

 div.image{ background-image: url("your/url/here"); background-size: contain; background-repeat: no-repeat; background-position: center; } 

Agora você pode apenas definir o seu tamanho div para o que você quiser e não apenas a imagem manterá sua relação de aspecto, ela também será centralizada verticalmente e horizontalmente dentro da div. Não se esqueça de definir os tamanhos no CSS, pois os divs não têm o atributo width / height na própria tag.

Esta abordagem é diferente de setecs resposta, usando isso a área da imagem será constante e definida por você (deixando espaços vazios na horizontal ou vertical, dependendo do tamanho div e relação de aspecto da imagem), enquanto resposta setecs você irá obter uma checkbox que exatamente o tamanho da imagem escalada (sem espaços vazios).

Edit: De acordo com a documentação de tamanho de fundo MDN você pode simular a propriedade background-size no IE8 usando uma declaração de filtro proprietária:

Embora o Internet Explorer 8 não suporte a propriedade background-size, é possível emular algumas de suas funcionalidades usando a function de filtro não-padrão -ms:

 -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')"; 

Remova a propriedade “height”.

  

Ao especificar ambos, você está alterando a proporção da imagem. Basta definir um resize, mas preservar a proporção.

Opcionalmente, para restringir oversizings:

  

Muito parecido com algumas respostas aqui, mas no meu caso eu tinha imagens que às vezes eram mais altas, às vezes maiores.

Esse estilo funcionou como um encanto para garantir que todas as imagens usem todo o espaço disponível, mantenha a proporção e não os cortes:

 .img { object-fit: contain; max-width: 100%; max-height: 100%; width: auto; height: auto; } 

Basta adicionar isso ao seu CSS, ele irá automaticamente reduzir e expandir mantendo a taxa original.

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

Não há uma maneira padrão de preservar a proporção de imagens com width , height e max-width especificadas juntas.

Portanto, somos forçados a especificar a width e a height para evitar que a página “salte” durante o carregamento de imagens ou para usar max-width e não especificar dimensões para imagens.

Especificar apenas width (sem height ) normalmente não faz muito sentido, mas você pode tentar replace o atributo HTML de height adicionando uma regra como IMG {height: auto; } IMG {height: auto; } na sua folha de estilo.

Veja também o bug relacionado ao Firefox 392261 .

https://jsfiddle.net/sot2qgj6/3/

Aqui está a resposta se você quiser colocar a imagem com porcentagem fixa de largura , mas não com pixels fixos de largura .

E isso será útil ao lidar com diferentes tamanhos de canvas .

Os truques são

  1. Usando padding-top para definir a altura da largura.
  2. Usando position: absolute para colocar a imagem no espaço de preenchimento.
  3. Usando max-height and max-width para garantir que a imagem não estará sobre o elemento pai.
  4. usando display:block and margin: auto para centralizar a imagem.

Eu também comentei a maioria dos truques dentro do violino.


Eu também acho algumas outras maneiras de fazer isso acontecer. Não haverá imagem real em html, então eu pessoalmente perferirei a melhor resposta quando precisar do elemento “img” em html.

css simples usando o fundo http://jsfiddle.net/4660s79h/2/

background-image com palavra no topo http://jsfiddle.net/4660s79h/1/

o conceito de usar posição absoluta é daqui http://www.w3schools.com/howto/howto_css_aspect_ratio.asp

Defina a class CSS da sua tag de contêiner de image-class para image-class :

 

e adicione isso a sua folha de estilo CSS.

 .image-full { background: url(...some image...) no-repeat; background-size: cover; background-position: center center; } 

Para manter uma imagem responsiva enquanto ainda aplica a imagem para ter uma determinada proporção, você pode fazer o seguinte:

HTML:

 
image

E SCSS:

 .ratio2-1 { overflow: hidden; position: relative; &:before { content: ''; display: block; padding-top: 50%; // ratio 2:1 } img { position: absolute; top: 0; left: 0; bottom: 0; right: 0; } } 

Isso pode ser usado para impor uma determinada proporção, independentemente do tamanho da imagem que os autores carregam.

Obrigado ao @Kseso em http://codepen.io/Kseso/pen/bfdhg . Verifique este URL para mais taxas e um exemplo de trabalho.

Você pode criar um div assim:

 

E use este css para estilizá-lo:

 height: 100%; width: 100%; background-position: center center; background-repeat: no-repeat; background-size: contain; // this can also be cover 

Você pode usar isto:

 img { width: 500px; height: 600px; object-fit: contain; position: relative; top: 50%; transform: translateY(-50%); } 

Para forçar a imagem que se encheckbox em um tamanho exato, você não precisa escrever muitos códigos. É tão simples

 img{ width: 200px; height: auto; object-fit: contain; /* Fit logo in the image size */ -o-object-fit: contain; /* Fit logo fro opera browser */ object-position: top; /* Set logo position */ -o-object-position: top; /* Logo position for opera browser */ } 
 Logo 

Isso fará com que a imagem diminua se for muito grande para a área especificada (como desvantagem, ela não aumentará a imagem).

A solução por setec é boa para “Shrink to Fit” no modo automático. Mas, para otimizar EXPANDIR para encheckboxr no modo ‘auto’, você precisa primeiro colocar a imagem recebida em um id de temperatura, Verificar se ela pode ser expandida em altura ou largura (dependendo da razão de aspecto da relação de aspecto de seu bloco de exibição),

 $(".temp_image").attr("src","str.jpg" ).load(function() { // callback to get actual size of received image // define to expand image in Height if(($(".temp_image").height() / $(".temp_image").width()) > display_aspect_ratio ) { $(".image").css('height', max_height_of_box); $(".image").css('width',' auto'); } else { // define to expand image in Width $(".image").css('width' ,max_width_of_box); $(".image").css('height','auto'); } //Finally put the image to Completely Fill the display area while maintaining aspect ratio. $(".image").attr("src","str.jpg"); }); 

Essa abordagem é útil quando as imagens recebidas são menores que a checkbox de exibição. Você deve salvá-los em seu servidor no tamanho Small Original, em vez da versão expandida, para preencher a checkbox de exibição do Bigger para economizar em tamanho e largura de banda.

 img { max-width: 80px; /* Also works with percentage value like 100% */ height: auto; } 
 

This image is originally 400x400 pixels, but should get resized by the CSS:

Let's say the author of the HTML deliberately wants the height to be half the value of the width, this CSS will ignore the HTML author's wishes, which may or may not be what you want:

Que tal usar um pseudoelemento para alinhamento vertical? Este código é menos para um carrossel, mas eu acho que funciona em todos os contêineres de tamanho fixo. Ele manterá a proporção e inserirá barras @ cinza-escuro na parte superior / inferior ou esquerda / gravará na dimensão mais curta. Enquanto isso, a imagem é centralizada horizontalmente pelo alinhamento do texto e verticalmente pelo pseudo-elemento.

  > li { float: left; overflow: hidden; background-color: @gray-dark; text-align: center; > a img, > img { display: inline-block; max-height: 100%; max-width: 100%; width: auto; height: auto; margin: auto; text-align: center; } // Add pseudo element for vertical alignment of inline (img) &:before { content: ""; height: 100%; display: inline-block; vertical-align: middle; } }