Solucionado (ver solución)
Solucionado
(ver solución)
2
respuestas

Acomodamiento de imagenes

Buenos días quisiera saber como puedo acomodar, imágenes que tienen diferentes tamaños para la página. Son distintas a la que viene en los videos del curso. Y por más que he intentado acomodarlo no puedo. Si alguien tiene alguna sugerencia. O en dado caso de que fueran las imágenes para probar con otras.

Aquí esta el código que he realizado.

<!DOCTYPE html>

<html> 
    <head>
        <meta charset="UTF-8">
        <title> Productos - Barbería Alura </title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="productos.css">

    </head>

    <body>
        <header>
            <div class="caja">
                <h1> <img src="Imagenes/Graham-Logo-Hor-Gradient.png"> </h1>

            <nav>
                <u1>
                    <li><a href="index.html">Inicio</a></li>
                    <li><a href="productos.html">Servicios</a></li>
                    <li><a href="https://www.grahampackaging.com/about-us/about-graham">Contacto</a></li>
                </u1>
            </nav>
            </div>
        </header>

        <main>
            <u1 class="empresa">
                <li>
                    <h2>¿Quienes somos?</h2>
                    <img src="Imagenes/Botellas.jpg">
                    <p class="descripcion_1"> Graham Packaging es el líder global en el diseño, venta, y fabricación con valor agregado, de envases plásticos personalizados a través de soplado dirigidos a las mas importantes marcas de alimentos y bebidas, productos químicos, cuidado personal y del hogar, y lubricantes automotrices. </p>
                </li>
                <li>
                    <h2>Historia</h2>
                    <img src="Imagenes/Logo.jfif">
                    <p class="descripcion_1"> Todo comenzó en 1970 con un simple contenedor de aceite de motor. Hoy en día, somos una empresa global cuya estabilidad, innovación y servicios personalizables atraen por igual a empresas de Fortune 500 y pequeñas empresas independientes.</p> 
                    <p class="descripcion_2">Ya sea que desee crear opciones de empaque nuevas y sostenibles o encontrar botellas de catálogo, lo ayudaremos a encontrar la solución adecuada.</p> 
                </li>
                <li>
                    <h2>Tecnología</h2>
                    <img src="Imagenes/Proceso.jpg">
                    <p class="descripcion_1"> Nuestras tecnologías son complejas. Pero nuestro enfoque para servirle es simple: estamos obsesionados con su éxito.</p> <p class="descripcion_2">Nuestro negocio se basa en principios atemporales como hablar con franqueza, hacer las cosas y contratar a las mejores personas, y estos principios informan el resto de nuestras operaciones.</p> 
                    <p class="descripcion_3">Nuestra gama de procesos y tecnologías cuidadosamente supervisados nos ayuda a ofrecer la innovación, la rapidez de comercialización y la satisfacción de la cadena de suministro que espera de un líder del sector. </p>
                </li>
            </u1>
        </main>
    </body>
</html>

Y mi css

header{
    background-color: bisque;
    padding: 20px 0;
}

.caja{
    width: 1000px;
    position: relative;
    margin: 0 auto;
}

nav{
    position: absolute;
    top: 85px;
    right: 0;
}

nav li{
    display: inline;
    margin: 0 20px 0 15px;
}

nav a{
    text-transform: uppercase;
    color: orange;
    font-weight: bold;
    font-size: 22px;
    text-decoration: none;
}
.empresa{
    width: 940px;
    margin: 0 auto;
    padding: 100x;
}

.empresa li{
    display: inline-block;
    text-align: center;
    width: 30%;
    vertical-align: top;
}

.empresa h2{
    font-size: 30px;
    font-weight: bold;
}

.descripcion_1{
    font-size: 18px;
    margin-top: 10px;
}

.descripcion_2{
    font-size: 18px;
    margin-top: 10px;
}

.descripcion_3{
    font-size: 18px;
    margin-top: 10px;
}

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

2 respuestas
solución!

Hola Jaime... deberia darle estilo a la etiqueta img

.empresa img {
width: 30%;
padding: 5px;
object-fit: contain;
}

hay mas cosa que podes agregar de estilo, y no necesariamente colocar las que escribi yo. pero si debes darle un tamaño alto o ancho para que sea un límite, sino te aparecen imagenes que te ocupan todo!!! espero te haya syudado, saludso

Muchas gracias Gianni, quedo solucionado