2

Tengo este contenido en un HTML: introducir la descripción de la imagen aquí

Es un contenido gradiante responsivo que contiene dos imagenes (la X y la estrella).

El codigo lo tengo de la siguiente manera:

<div style="background: linear-gradient(to bottom,#004AB1, #5DADE2 ); width: 5%; height: 100px !important; margin: 20px; display: table-cell; vertical-align: middle; -webkit-box-shadow: inset 0 0 5px 5px rgba(0,0,0,.1); box-shadow: inset 0 0 5px 5px rgba(0,0,0,.1); -webkit-border-radius: 10px; border-radius: 10px; padding-left: 20px;">
<p>
    <img src="/pluginfile.php/57641/mod_book/intro/EX_estrellas_apoyo.png" alt="logo_Cultura" style="float: left; margin-right: 20px; height: 70px; margin-top: 10px;">
    <img src="/pluginfile.php/57641/mod_book/intro/EX_imagotipo_X.png" alt="logo_Provident" style="float: right; margin-right: 10px; height: 100px;">
</p></div>

Hasta aqui todo bien, el problema me surge al momento de hacer la pantalla mas pequeña.

  • La altura se hace más grande.
  • Las imagenes se ponen una encima de otra en diferentes renglones introducir la descripción de la imagen aquí

Lo que yo quiero lograr es lo siguiente:

  • Que la altura no se modifique
  • Que la imagen (la estrella) se vaya recorriendo a la derecha conforme la pantalla se vaya haciendo más pequeña de lo ancho.

introducir la descripción de la imagen aquí

Espero puedan ayudarme por favor. Gracias

5
  • te iba recomendar el comando align pero viendolo mejor me quedo y observo porque me intrigó Commented el 17 mar. 2022 a las 19:31
  • ¿Cual seria ancho del div a partir del cual la image de la estrella deberia empezar a "ocultarse"?
    – Marcos
    Commented el 17 mar. 2022 a las 19:43
  • Desde la primer alteración que se le haga al ancho del div la imagen debe empezar a recorrerse.
    – Angel Rios
    Commented el 17 mar. 2022 a las 20:51
  • Imaginate una resolucion de pantalla de por ejemplo 1920px de ancho ¿hasta que punto se podría achicar antes de empezar a ocultar la imagen de las estrella? Imagino que para una resolución menor a 1024px ya debería ocultarse... lo que necesito saber es el "punto de quiebre"
    – Marcos
    Commented el 17 mar. 2022 a las 20:55
  • Si, definamos que el "punto de quiebre" es 1024px. P.D.: La función principal que busco es que se vaya recorriendo a la derecha.
    – Angel Rios
    Commented el 17 mar. 2022 a las 21:12

2 respuestas 2

1

La más "simple" es usar una table, así por ejemplo:

  • Al div lo indicamos que cuando contenido no entre, se oculte (overflow: hidden)
  • Agregamos una table la cual va a ocupar el 100% del ancho del div y como mínimo va a medir 1024px. Esta tabla va a tener una fila con 2 celdas
  • La celda de la izquierda va a tener la "X"
  • La celda de la derecha va a tener la "estrella" alineada a la derecha

Ejemplo:

.header {
  overflow: hidden;
  border: 1px solid green;
  background: linear-gradient(to bottom, #004AB1, #5DADE2);
  height: 100px !important;
  padding-left: 20px;
  margin: 20px;
  vertical-align: middle;
  box-shadow: inset 0 0 5px 5px rgba(0, 0, 0, .1);
  border-radius: 10px;
}

.header table {
  width: 100%;
  /* Punto de quiebre */
  min-width: 1024px;
}

img {
  border: 1px solid red;
}

.text-right {
  text-align: right;
}
<div class="header">
  <table>
    <tr>
      <td><img src="https://previews.123rf.com/images/blankstock/blankstock1902/blankstock190200727/125609735-eliminar-icono-quitar-letrero-s%C3%ADmbolo-cancelar-o-cerrar-elemento-de-dise%C3%B1o-de-calidad-icono-de-estil.jpg?fj=1" width="100" alt="logo_Cultura"></td>
      <td class="text-right"><img src="https://previews.123rf.com/images/frizio/frizio1512/frizio151200007/49579125-%C3%A9toile-d-or-com%C3%A8te-symbole-de-no%C3%ABl.jpg?fj=1" width="900" height="81" alt="logo_Provident"></td>
    </tr>
  </table>
</div>

PD: Podemos reemplazar la table con una estructura flexbox o grid layout. Si te interesa, dejamelo saber en los comentarios.


Actualización

Usando grid layout

Ejemplo:

.header {
  overflow: hidden;
  border: 1px solid green;
  background: linear-gradient(to bottom, #004AB1, #5DADE2);
  height: 100px !important;
  padding-left: 20px;
  margin: 20px;
  vertical-align: middle;
  box-shadow: inset 0 0 5px 5px rgba(0, 0, 0, .1);
  border-radius: 10px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  min-width: 1024px;
}

.cell1 {
  grid-column: 1 / 2;
  grid-row: 1;
}

.cell2 {
  grid-column: 2 / 2;
  grid-row: 1;
}

img {
  border: 1px solid red;
}

.text-right {
  text-align: right;
}
<div class="header">
  <div class="grid">
    <div class="cell1"><img src="https://previews.123rf.com/images/blankstock/blankstock1902/blankstock190200727/125609735-eliminar-icono-quitar-letrero-s%C3%ADmbolo-cancelar-o-cerrar-elemento-de-dise%C3%B1o-de-calidad-icono-de-estil.jpg?fj=1" width="100" alt="logo_Cultura"></div>
    <div class="cell2 text-right"><img src="https://previews.123rf.com/images/frizio/frizio1512/frizio151200007/49579125-%C3%A9toile-d-or-com%C3%A8te-symbole-de-no%C3%ABl.jpg?fj=1" width="900" height="81" alt="logo_Provident"></div>
  </div>
</div>

2
  • Gracias Marcos, he hecho unas modificaciones al codigo y se ve mejor de lo que tenia antes. Y estaría genial que me mostraras la estructura de flexbox o de grid layout.
    – Angel Rios
    Commented el 18 mar. 2022 a las 2:49
  • 1
    @AngelRios agregue un ejemplo usando grid layout. Saludos!
    – Marcos
    Commented el 18 mar. 2022 a las 11:14
0

La solución es muy fácil pero... Si estás usando bootstrap4, deja que bootstrap4 haga todo el trabajo. Basta con conocer sus clases de CSS para declarar en HTML, y sin tocar CSS (salvo algunos ajustes fuera de éste).

Tu ajuste CSS solamente, en este caso, sería el fondo.

Lo que hice es que agregué una clase en la etiqueta <img> con el estilo propio de bootstrap4 que es: float-left y float-right.

Pero en tu caso, estás usando bootstrap4 y quedaría así:

.container {
 background: linear-gradient(to bottom,#004AB1, #5DADE2 ); 
 width: 100%; 
 height: 100px !important; 
 margin: 20px; 
 display: flex;
 justify-content: space-between;
 align-items: center; 
 vertical-align: middle; 
 -webkit-box-shadow: inset 0 0 5px 5px rgba(0,0,0,.1); 
 box-shadow: inset 0 0 5px 5px rgba(0,0,0,.1); 
 -webkit-border-radius: 10px; 
 border-radius: 10px; 
 padding-left: 20px;
}

.container img {
 background-color: violet
}
<html>
 <head>
  <meta http-equiv="CONTENT-TYPE" content="text/html; charset=UTF-8">
  
  <link rel="stylesheet" href="bootstrap.min.css">  
  <link rel="stylesheet" href="alinear.css">
 </head>
 <body>
  
  <div class="container"> 
   
  <img class="float-left" src="/pluginfile.php/57641/mod_book/intro/EX_estrellas_apoyo.png" alt="logo_Cultura" >

<img class="float-right" src="/pluginfile.php/57641/mod_book/intro/EX_imagotipo_X.png" alt="logo_Provident" >
 
  
 </div>
  
 </body>
</html>

Pero si no se usa bootstrap4, modifique un poco de tu código para que quedara así:

* {
 box-sizing: border-box;
}

html, body {
 margin: 0;
 padding: 0;
}

.container {
 display: flex;
 justify-content: space-between;
 align-items: center;
 background: linear-gradient(to bottom,#004AB1, #5DADE2 ); 
 width: 100%; 
 height: 100px !important; 
 margin: 20px; 
 -webkit-box-shadow: inset 0 0 5px 5px rgba(0,0,0,.1); 
 box-shadow: inset 0 0 5px 5px rgba(0,0,0,.1); 
 -webkit-border-radius: 10px; 
 border-radius: 10px; 
 padding: 0 20px;
}

.container img {
 display: block;
 margin: auto;
 width: auto;
 background-color: red;
}

.container .float-left {
 float: left; 
 margin-left: 0;
 height: 70px; 
}

.container .float-right {
 float: right; 
 margin-right: 0;
 height: 100px;
}
<div class="container"> 
   
<img class="float-left" src="/pluginfile.php/57641/mod_book/intro/EX_estrellas_apoyo.png" alt="logo_Cultura" > 
<img class="float-right" src="/pluginfile.php/57641/mod_book/intro/EX_imagotipo_X.png" alt="logo_Provident" > 
  
  </div>

Importante.

  1. La etiqueta <img> no es necesario insertar dentro de una etiqueta <p> (las etiquetas p son solamente para textos)
  2. No es necesario agregar en una etiqueta los estilos CSS (es mejor crear un nuevo archivo .css y linkearlo desde html

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.