Faça uma imagem responsiva-forma mais simples [duplicado]

Largura: 100% irá quebrá-lo quando você ver um are maior.

A seguir está o img-responsive do Bootstrap

max-width: 100%; 
display:block; 
height: auto;

Eu também recomendaria usar todas as propriedades CSS em um arquivo diferente do arquivo HTML, para que você possa ter o seu código organizado melhor.

Primeiro, nomeie a sua marca <img> usando um atributo class ou id no seu ficheiro HTML:

<img src="IMAGE LINK" border="0" class="responsive-image" alt="Null">

Então, no meu ficheiro CSS eu faria as alterações para torná-lo sensível:

.responsive-image {
  height: auto;
  width: 100%;
}

HTML

<div id="logo_wrapper">
  <a href="http://example.com" target="_blank">
    <img src="http://example.com/image.jpg" border="0" alt="logo" />
  </a>
</div>

CSS

#logo_wrapper img {
  max-width: 100%;
  height: auto;
}

Para tornar todas as imagens do seu site responsivas, não altere o seu HTML inline de marcação correta, como largura:100% não funciona em todos os navegadores, e causa problemas no Firefox. O que você quer fazer é colocar suas imagens em seu site como você normalmente deve:

<img src="image.jpg" width="1200px" height="600px" />

E depois adicionar ao seu css que qualquer imagem de largura máxima é 100% com a altura configurada como automática:

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

Estou sempre a usar isto

Pode personalizar a classe img e a propriedade de largura máxima.

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

A largura máxima é imp caso contrário, a sua imagem irá escalar demasiado para o ecrã. Não há necessidade de colocar a propriedade altura porque por padrão é modo automático.

Defina a altura ou a largura da imagem como %100.

Para fazer uma imagem sensível use o seguinte:

CSS

.responsive-image {
        width: 950px;//Any width you want to set the image to.
        max-width: 100%;
        height: auto;
}

HTML

<img class="responsive-image" src="IMAGE URL">

CSS:

.image-container{
  height: 100%; // doesn't have to be '%' can also use 'px'
  width: 100%;
  margin: 0 auto;
  padding: 0;

  background-image: url(../img/exampleImage.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100%;

}

HMTL:

<div class="image-container"></div>

As imagens devem ser definidas assim

img { max-width: 100%; }

Use bootstrap para ter uma corrida livre com as suas imagens como mostrado use a classe img-responsive e você está pronto

<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236"> 

Em vez de adicionar css para tornar a imagem sensível, a adição de diferentes imagens de resolução w.r.t. de resolução diferente do ecrã tornaria a aplicação mais eficiente.

Os navegadores móveis não precisam de ter a mesma imagem de alta resolução que os navegadores do ambiente de trabalho precisam.

Usando o SAS é fácil de usar diferentes versões da imagem para diferentes resolução usando a consulta de mídia.