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

title attribute anchor tag

Question

¿Cómo puedo evitar que el ancho de un div se expanda más allá de un porcentaje Y un píxel? En otras palabras, el navegador debe calcular el valor en píxeles del porcentaje y luego elegir el menor de los dos valores.

Si los configurara de esta manera: {max-width:100px;max-width:20%;} el flujo de activos simplemente elegiría el segundo e ignoraría el primero.

Answer 1

Esto NO funcionará con diferentes tamaños de imagen / relaciones de aspecto. Puede definir el ancho máximo y la altura máxima 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: tiene 5 fotos de su teléfono para colocarlas en una página y necesita un 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. Desea que no excedan la mitad de la pantalla y que no sean más anchos que 250 px en la tableta. Calcule la altura máxima: 250 * 300/500 = 150px.

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

Probado en las últimas versiones de Chrome, Firefox e IE.

Answer 2

Tenía el mismo ancho "ajuste de página" en mi sitio. Quería que fuera del 95% de ancho 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;}}

Answer 3

Tuve 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 código 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 encogerse para ajustarse. Es decir, establecer un width no satisfarí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 400 px (siempre reducida) y una imagen más pequeña que el umbral (solo reducida 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, solo aumente el max-width @media .

Answer 4

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>

Answer 5

width:20%;
max-width:100px;

Esto establece el ancho al 20%, pero lo limita a 100 px.