Pytania rekrutacyjne dla Front-end developerów

Za pomocą atrybutów srcset i sizes:

Sposób 1:

<div class="container2"> 
    <img srcset="green-parrot-500px.jpg 500w, green-parrot-350px.jpg 350w, green-parrot-200px.jpg 200w" 
         sizes= "(max-width: 400px) 200px, (max-width: 600px) 350px, 500px" 
         src="green-parrot-500px.jpg" 
         alt="green-parrot-picture" /> 
</div> 

Sposób 2:

<picture> 
    <source media="(max-width: 400px)" srcset="green-parrot-200px.jpg"> 
    <source media="(max-width: 600px)" srcset="green-parrot-350px.jpg"> 
    <img src="green-parrot-500px.jpg" style="width:auto" alt="green parrot picture"> 
</picture> 

Można użyć kilku sposobów:

• margin: auto;
• Flexbox
• Grid
• CSS Transform i Position: absolute

Każdy element w dokumencie HTML zajmuje określony obszar. Obszar ten nazywany jest pudełkiem i składają się na niego:

• zawartość (content)
• „marginesy” wewnętrzne (padding)
• obramowanie (border)
• marginesy (margin)

Wszystkie te opcje wpływają na wielkość pudełka. Domyślnie wielkość pudełka ustawiona jest na zawartość content-box, co oznacza, że jeśli ustawisz szerokość lub wysokość elementu np. na 200px i dodasz do niego paddingi, obramowanie lub marginesy, to wielkość pudełka zwiększy się o te dane.

Jeśli chcesz, aby paddingi lub obramowanie nie zwiększały rozmiarów pudełka na zewnątrz, możesz ustawić mu zawartość padding-box lub border-box.

Dostępne opcje dla atrybutu box-sizing: content-box | border-box | padding-box