-1

Quiero conseguir que una imagen sea responsive sin tener que ajustar el ancho y el alto.

 body {
            background-color: #FDFDFD;
        }

        img {
            height: 200px;
            width: 200px;
        }

        .grid-container {
            display: grid;
            grid-auto-rows: 230;
            background-color: #F4F4F4;
            grid-gap: 10px;
            justify-content: center;
            padding: 10px;
        }

        .item {
            background-color: #E9E6E6;
            display: grid;
            grid-template-columns: 1fr 2fr;
            box-shadow: 0px 1px 3px #888888;
        }

        .item:hover {
            box-shadow: 0px 2px 5px #636262;
        }

        .img {
            padding: 0 15px;
        }

        .flex-box {
            display: flex;
            flex-direction: row;
        }

        .tweet {
            margin-left: auto;
            align-self: center;
        }

        @media screen and (max-width: 500px) {

            .item,
            .item1 {
                grid-template-columns: 1fr;
                grid-auto-rows: 230;
            }
        }
<div class="grid-container">
        <div class="item item1">
            <img src="https://loremflickr.com/640/480?random=1" alt="01">
            <div class="img">
                <h3>Header1</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam explicabo distinctio placeat
                    voluptas, tempora at iure libero aut provident velit similique ducimus inventore! Quaerat
                    voluptatibus consectetur adipisci sapiente eius delectus.</p>
                <div class="flex-box">
                    <p>Fecha<br><span>Autor</span></p>
                    <p class="tweet">Tweet</p>
                </div>
            </div>
        </div>
        <div class="item item2">
            <img src="https://loremflickr.com/640/480?random=2" alt="02">
            <div class="img">
                <h3>Header2</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam explicabo distinctio placeat
                    voluptas, tempora at iure libero aut provident velit similique ducimus inventore! Quaerat
                    voluptatibus consectetur adipisci sapiente eius delectus.</p>
                <div class="flex-box">
                    <p>Fecha<br><span>Autor</span></p>
                    <p class="tweet">Tweet</p>
                </div>
            </div>
        </div>
        <div class="item item3">
            <img src="https://loremflickr.com/640/480?random=3" alt="03">
            <div class="img">
                <h3>Header3</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam explicabo distinctio placeat
                    voluptas, tempora at iure libero aut provident velit similique ducimus inventore! Quaerat
                    voluptatibus consectetur adipisci sapiente eius delectus.</p>
                <div class="flex-box">
                    <p>Fecha<br><span>Autor</span></p>
                    <p class="tweet">Tweet</p>
                </div>
            </div>
        </div>
    </div>

0

2 respuestas 2

0

Solo necesitas cambiar las propiedades width y height así:

img {
     width: 100%;
     height: auto;
}

 body {
            background-color: #FDFDFD;
        }

        img {
            width: 100%;
            height: auto;
        }

        .grid-container {
            display: grid;
            grid-auto-rows: 230;
            background-color: #F4F4F4;
            grid-gap: 10px;
            justify-content: center;
            padding: 10px;
        }

        .item {
            background-color: #E9E6E6;
            display: grid;
            grid-template-columns: 1fr 2fr;
            box-shadow: 0px 1px 3px #888888;
        }

        .item:hover {
            box-shadow: 0px 2px 5px #636262;
        }

        .img {
            padding: 0 15px;
        }

        .flex-box {
            display: flex;
            flex-direction: row;
        }

        .tweet {
            margin-left: auto;
            align-self: center;
        }

        @media screen and (max-width: 500px) {

            .item,
            .item1 {
                grid-template-columns: 1fr;
                grid-auto-rows: 230;
            }
        }
<div class="grid-container">
        <div class="item item1">
            <img src="https://loremflickr.com/640/480?random=1" alt="01">
            <div class="img">
                <h3>Header1</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam explicabo distinctio placeat
                    voluptas, tempora at iure libero aut provident velit similique ducimus inventore! Quaerat
                    voluptatibus consectetur adipisci sapiente eius delectus.</p>
                <div class="flex-box">
                    <p>Fecha<br><span>Autor</span></p>
                    <p class="tweet">Tweet</p>
                </div>
            </div>
        </div>
        <div class="item item2">
            <img src="https://loremflickr.com/640/480?random=2" alt="02">
            <div class="img">
                <h3>Header2</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam explicabo distinctio placeat
                    voluptas, tempora at iure libero aut provident velit similique ducimus inventore! Quaerat
                    voluptatibus consectetur adipisci sapiente eius delectus.</p>
                <div class="flex-box">
                    <p>Fecha<br><span>Autor</span></p>
                    <p class="tweet">Tweet</p>
                </div>
            </div>
        </div>
        <div class="item item3">
            <img src="https://loremflickr.com/640/480?random=3" alt="03">
            <div class="img">
                <h3>Header3</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam explicabo distinctio placeat
                    voluptas, tempora at iure libero aut provident velit similique ducimus inventore! Quaerat
                    voluptatibus consectetur adipisci sapiente eius delectus.</p>
                <div class="flex-box">
                    <p>Fecha<br><span>Autor</span></p>
                    <p class="tweet">Tweet</p>
                </div>
            </div>
        </div>
    </div>

0

Hola amigo aqui te aporto 2 soluciones

  1. utilizar el atributo srcset

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

  1. Utilizar los Media Queries.

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  img {
    width: 700px;
    height: auto;
  }
}

Tu Respuesta

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

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