The width and height settings of the image

Basic Concepts of Image Width and Height

Image dimensions determine the display size of elements on a page. In HTML, image size can be controlled in various ways, with the most basic being the width and height attributes:

<img src="example.jpg" width="300" height="200" alt="Example image">

These attributes accept pixel values (without units) or percentages. Modern development prefers using CSS for size control, but HTML attributes still offer initial layout advantages.

HTML Attribute Setup Methods

Setting width and height directly in the <img> tag is the most traditional approach:

<!-- Fixed pixel values -->
<img src="logo.png" width="150" height="150">

<!-- Percentage (relative to parent container) -->
<img src="banner.jpg" width="100%" height="auto">

Key characteristics:

• Height adjusts proportionally when only width is set
• Setting both width and height may cause image distortion
• Percentages are calculated based on the parent element

CSS Styling Control Solutions

CSS provides more flexible size control:

/* Basic size settings */
img.responsive {
  width: 100%;
  height: auto;
}

/* Maximum width limit */
.thumbnail {
  max-width: 200px;
}

/* Viewport units */
.hero-image {
  width: 100vw;
  height: 50vh;
}

Responsive Image Practices

Modern web pages need to adapt to different devices. Recommended solutions:

<picture>
  <source media="(min-width: 1200px)" srcset="large.jpg">
  <source media="(min-width: 768px)" srcset="medium.jpg">
  <img src="small.jpg" style="width:100%;height:auto;">
</picture>

Combine with the sizes attribute for more precise control:

<img srcset="small.jpg 480w, medium.jpg 1024w"
     sizes="(max-width: 600px) 480px, 1024px"
     src="fallback.jpg">

Aspect Ratio Locking Techniques

Key techniques for maintaining specific ratios:

.aspect-ratio {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 ratio */
}

.aspect-ratio img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Native HTML solution:

<img src="video-thumbnail.jpg" width="16" height="9" loading="lazy">

Performance Optimization Considerations

Improper size settings can cause performance issues:

<!-- Bad: Browser downloads large image then scales it -->
<img src="huge-image.jpg" width="100">

<!-- Recommended: Provide appropriately sized images -->
<img src="optimized-image.jpg" width="100" height="100">

Use srcset with w descriptors:

<img srcset="small.jpg 300w, medium.jpg 600w, large.jpg 1200w"
     sizes="(max-width: 768px) 100vw, 50vw"
     src="medium.jpg">

Dynamic Adjustment Solutions

JavaScript dynamic control example:

function resizeImages() {
  document.querySelectorAll('img.adaptive').forEach(img => {
    const container = img.parentElement;
    img.style.width = `${container.offsetWidth}px`;
  });
}

window.addEventListener('resize', resizeImages);

CSS container queries new feature:

@container (min-width: 500px) {
  .card img {
    width: 100%;
    height: 200px;
  }
}

Special Scenario Handling

Background image size control:

.hero {
  background-image: url('hero.jpg');
  background-size: cover;
  width: 100%;
  height: 400px;
}

Special handling for SVG images:

<svg width="200" height="100" viewBox="0 0 20 10">
  <rect width="20" height="10" fill="#3498db"/>
</svg>

Cross-Device Adaptation Strategies

Handling for high-DPI devices:

<img src="standard.png"
     srcset="retina.png 2x"
     width="200" height="100">

CSS solution with media queries:

@media (-webkit-min-device-pixel-ratio: 2), 
       (min-resolution: 192dpi) {
  .high-dpi {
    background-image: url('image@2x.jpg');
    background-size: contain;
  }
}

Common Problem Solutions

Fixing image distortion:

.fixed-ratio {
  width: 300px;
  height: 200px;
  object-fit: contain; /* or cover */
}

Maintaining placeholder space:

<div class="image-wrapper" style="width:300px;height:200px;">
  <img src="loading.gif" data-src="actual.jpg" 
       style="width:100%;height:100%;object-fit:cover;">
</div>