Capire come si ridimensionano gli oggetti

Salve io voglio capire la logica che c'è nel creare oggetti che si adattano allo schermo ho letto qualcosa ma non ho capito bene ho provato con un immagine in questo modo e va bene

<div id="imgblob"><a href="ai.html"> <img src="immagini/blob.png" alt="immagine introduzione" width="100%" height="auto"></a></div>

Ma ora il problema si ripresenta: affianco all'immagine sopra ci stanno altri oggetti ho provato nello stesso modo ma non flettano
questo è il 2° oggetto

  <a href="blog.html"> <button id="blogpulsante" width="100%" height="auto">BLOG!</button></a>

[GraphOGLRisorse]

Salve,
l'uso di height="auto" non può funzionare per elementi differenti da un'immagine.

Può rendere autoadattabile un pulsante in questo modo:

#blogpulsante{
   width: 100%;
   min-width: 50px;  
   max-width: 300px;
   padding: 5% 10%;
}

Cordiali sdaluti.

veda se cosi vada bene

  #forumpulsante {
            width: 100%;
            min-width: 50px;  
            max-width: 125px;
            position: absolute;
             top: 50px;
             left: 720px;
             font-size: 18px;
           outline: none;
           cursor: pointer;
           text-align: center;
           text-decoration: none;
           font: bold 12px Arial, Helvetica, sans-serif;
           color: #ffffff;
           padding: 20px 40px;
           border: solid 1px #b22222;
           background: #3D4D69;
           }

[GraphOGLRisorse]

Scusi, mi sono accorto ora che prima mi era sfuggito di indicare anche il padding con valori in percentuale.

Ad ogni modo, se usa position:absolute; il ridimensionamento automatico non avviene:

Inoltre, se usa font in questo modo

font: bold 12px Arial, Helvetica, sans-serif;

la dimensione è già impostate con 12px, quindi non serve impostare anche

font-size: 18px;

ma basta modificare il valore nell'attibuto font.

Un esempio pratico è questo.

Cordiali saluti.

Grazie mille va bene si ridimensiona