html - with - style background image url responsive




Como redimensionar automaticamente uma imagem para caber em um contêiner div (19)

A maneira mais simples de fazer isso é

usando o ajuste de objeto

<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, adicione a classe img-responsive e mude para

.container img{
      object-fit: cover;
    }

Como você redimensiona automaticamente uma imagem grande para que ela caiba em um contêiner div de largura menor, mantendo sua relação 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 é automaticamente redimensionada.


A resposta aceita de Thorn007 não funciona quando a imagem é muito pequena .
Para resolver isso, adicionei um fator de escala . Desta forma, torna a imagem maior e enche 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: top esquerdo; no estilo.
2 / com um fator de escala de 4, você tem largura máxima = 400/4 = 100 e altura máxima = 200/4 = 50
3 / uma solução alternativa é definir max-width e max-height em 25%, é ainda mais simples


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>

JS

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

Aqui está uma solução que alinhar verticalmente e horizontalmente sua img dentro de uma div sem qualquer alongamento, mesmo se a imagem fornecida for pequena ou grande demais para caber na div. O html:

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

O CSS:

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

O JQuery:

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

Espero que isso ajude vocês


Centralizei e dimensionei proporcionalmente uma imagem dentro de um hiperlink horizontalmente e verticalmente da seguinte 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;
}

Testado no IE, Firefox, Safari.

Mais informações sobre centralização estão here .


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

img {
    max-height: 75vh;
}

Dê a altura e a largura necessárias para sua imagem ao div que contém a tag <img>. não se esqueça de dar a altura / largura na tag de estilo apropriada. Na tag <img>, atribua 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.


Definir div simplesmente

   div.headerimg1 {
       position: absolute;
       top: 290px;
       left: 81px;
       width: 389px;
            height: 349px;
}
<div class="headerimg1">
<img src="" style="max-height:100%;height:auto;width:100%;max-width:100%;margin:auto;
display:inline;"></div>

Eu tenho solução muito melhor sem necessidade de qualquer JS. É totalmente responsivo e eu uso muito. Você geralmente precisa ajustar a imagem de qualquer razão de aspecto ao elemento do contêiner com a 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 independentemente, a imagem respeitará a menor (dependendo dos valores e proporção da imagem). Você também pode definir a imagem para ser alinhado como você deseja (por exemplo, para a imagem do produto no fundo branco infinito você pode posicioná-lo para o fundo do centro facilmente)


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

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

Além disso, height: auto; se você quiser 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>


O seguinte funciona perfeitamente para mim:

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

Ou você pode simplesmente usar:

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

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


Todas as respostas fornecidas, incluindo as aceitas, funcionam apenas sob a suposição de que o wrapper div é de tamanho fixo. Portanto, é assim que é feito, seja qual for o tamanho do wrapping div e isso é muito útil se você desenvolver uma página responsiva:

Escreva estas declarações dentro do seu seletor DIV :

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

Em seguida, coloque essas declarações no seu seletor de IMG :

width : "100%" /* obligatory */
max-height :  anyValueYouWant /*(in px or %)*/ 

MUITO IMPORTANTE:

O valor de maxHeight deve ser o mesmo para os seletores DIV e IMG .


Uma solução simples é usar o flex-box. 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ê deverá obter uma imagem centralizada no contêiner com as dimensões preservadas. Felicidades.


Você pode definir a imagem como plano de fundo para uma div e usar a propriedade css background-size

background-size: cover;

e "Escale a imagem de plano de fundo para ser o maior possível para que a área de plano de fundo seja totalmente coberta pela imagem de fundo. Algumas partes da imagem de plano de fundo podem não estar visíveis na área de posicionamento em plano de fundo" -w3schools.com


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


Editar: o posicionamento anterior da imagem baseada em tabelas tinha problemas no IE11 ( max-height não funciona no display:table elementos da display:table ). Eu substituí-lo com posicionamento baseado em linha que não só funciona bem no IE7 e IE11, mas também requer menos código.

Aqui está a minha opinião sobre o assunto. Ele só funcionará se o container tiver o tamanho especificado ( max-width e max-height não parecem se dar bem com containers que não têm tamanho concreto), mas eu escrevi o css de uma forma que permite que ele seja reutilizado (adicione picture-frame classe picture-frame e a classe de tamanho px125 ao 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 imgs enclosed in anchors in IE */
}

E em html:

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

DEMO

/* 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 imgs enclosed in anchors in IE */
}

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

Edit: Possível melhoria adicional usando JS (upscaling images):

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) };
});

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




autoresize