1

Estoy desarrollando una web en Bootstrap 4 y en el encabezado tengo un logotipo formato SVG que tiene que ser responsive ( sin tamaño fijo) pero no es posible visualizarlo a no ser que le deje la propiedad de ancho en un valor fijo en .px ¿ Existe alguna forma de que sea responsive sin dejar un valor fijo en .px? Porque en Chrome, Opera, Safari, Internet explorer dejando la propiedad Width en auto. En todos los navegadores aparece sin problema pero en Firefox no

<div class="col-md-2 col-sm-12 col-xs-12 text-center" style="padding-left: 0px; padding-right: 0px;">
<div style="height: 80px; display: flex; align-items: center;">
<a href="index">
<img style="width: 100% !important; height: auto !important;" src="img/imprentaonline24.svg" alt="imprentaonline24"/>
</a>
</div>
</div>

1 respuesta 1

2

Te recomiendo que no uses estilos inline dentro del HTML, lo más apropiado es usar clases para definir estilos, y más si ustás usando un framework como Bootstrap.

Para que tus imágenes sean responsivas, aplícales la clase .img-fluid, la cual contiene estas propiedades CSS:

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

Recuerda que el valor es calculado a la longitud absoluta del elemento que contenga tu imagen.

Probado en Firefox v67.0.4, también puedes ver la compatibilidad de la propiedad max-width con diferentes navegadores aquí.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">



<div class="col-md-2 col-sm-12 col-xs-12 text-center" style="padding-left: 0px; padding-right: 0px;">
  <div style="height: 80px; display: flex; align-items: center;">
    <a href="index">
      <img class="img-fluid" src="https://cdn.worldvectorlogo.com/logos/stack-overflow.svg" alt="imprentaonline24" />
    </a>
  </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.