¿Cómo establecer un ancho máximo como porcentaje y píxeles?

Una forma de lograr esto es simplemente usar dos divs

<div class="outer">
  <div class="inner">
    This content will not exceed 100px or 20% width.
  </div>
</div>

<style>
.outer {
  max-width: 90%;
}
.inner {
  max-width: 100px;
}
</style>

Esto NO funcionará con diferentes tamaños de imagen/relaciones de aspecto. Puede definir max-width y max-height por separado, si conoce los tamaños de las imágenes. Utilice este método para un grupo específico de imágenes, pero no como regla general.

Ejemplo práctico: Tienes 5 fotos de tu teléfono para ser colocadas en una página y necesitas algo de texto para estar en la otra mitad de la pantalla. Reduce el tamaño de las imágenes a 500px de ancho y 300px de alto. Quieres que no excedan la mitad la pantalla y no ser más ancho que 250px en la tableta. Calcular la altura máxima: 250 * 300/500 = 150px.

.img-class {
    max-width: 50%;
}
@media (max-width: 800px) {
    .img-class {
       max-height: 150px;
    {
}

Probado en la última Chrome, Firefox e IE.

Tenía un problema específico que requería una solución similar. Necesitaba mostrar todas las imágenes (independientemente de la relación de aspecto, la posición o el marcado HTML adicional) en su tamaño original, hasta un ancho máximo establecido en píxeles. Si la pantalla es más pequeña que este tamaño fijo, debe reducirse para ajustarse. Es decir, establecer un width no cumpliría los requisitos.

Para ampliar la respuesta de @Kiaurutis:

img {
  max-width: 400px;
}

@media (max-width: 400px) {
  img {
    max-width: 100%;
  }
}

Un ejemplo de trabajo se puede ver aquí: https://jsfiddle.net/vrehxmpx / . En este ejemplo hay una imagen mayor que 400px (siempre a menor escala) y una imagen más pequeña que el umbral (solo a menor escala cuando la pantalla es más pequeña que la imagen).

Para ajustar los márgenes, bordes y otras cosas que pueda tener en la imagen, simplemente aumente los @media's max-width.

Tenía el mismo ancho "page wrap" en mi sitio. Quería que tuviera un ancho del 95% por defecto, pero no más de 1280px. así es como lo hice con CSS

.wrap{max-width:95%;margin:0px auto;}
@media screen and (max-device-width:1280px),screen and (max-width:1280px){.wrap{max-width:1280px;margin:0px auto;}}