Hey there! Let’s walk through making your images (including your logo) responsive, using your existing CSS as a starting point.

Core Responsive Image Basics #

The foundation of responsive images is ensuring they scale with their container while keeping their original aspect ratio. Add this base rule to your CSS—it works for almost all images:

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

• max-width: 100%: Stops images from overflowing their parent containers
• height: auto: Automatically adjusts height to match the scaled width, preventing distortion

Fixing Your Header Logo #

Your #header is full-width with a fixed 70px height. To make your .logoheader fit perfectly across all screen sizes without breaking the header layout, update its styles like this:

#header {
  width: 100%;
  height: 70px;
  background-color: #d495a8;
  /* Add flexbox to vertically center the logo */
  display: flex;
  align-items: center;
  padding: 0 10px; /* Optional: Add padding to prevent logo touching edges */
}

.logoheader {
  transition: 0.5s all;
  max-width: 100%; /* Won’t exceed header width */
  max-height: 100%; /* Won’t exceed header’s 70px height */
  width: auto; /* Scales width proportionally with height */
  /* Keep your existing margin properties here */
}

• Flexbox’s align-items: center ensures the logo stays vertically centered as it scales, which looks cleaner on all devices.
• max-height: 100% guarantees the logo never grows taller than the header, so your layout won’t break on small screens.

Making Your .showcasemedia Icons Responsive #

Your current .showcasemedia uses a fixed 60px width. To let these icons shrink on smaller screens while keeping their maximum size, tweak the CSS:

.showcasemedia {
  max-width: 60px; /* Retain size on larger screens */
  width: 100%; /* Shrink if parent container is smaller */
  height: auto;
  transition: 0.25s all ease;
}

.showcasemedia:hover {
  transform: scale(1.05); /* Removed -webkit- prefix for modern browser support */
  cursor: pointer;
}

• Swapping fixed width for max-width gives the icons flexibility without losing their intended size on bigger screens.

Bonus: Optimize for High-Res Screens #

If you want to serve crisper logos on high-resolution displays, use the srcset attribute in your HTML. This lets browsers pick the right image size based on the screen:

<img 
  src="logo-standard.jpg" 
  srcset="logo-standard.jpg 600w, logo-high-res.jpg 1200w" 
  alt="Your Logo" 
  class="logoheader"
>

This is optional but improves performance and visual quality for users with Retina displays.

内容的提问来源于stack exchange，提问作者Ender Ady