Mi imagen no cambia de tamaño usando CSS. Intenté todas las sugerencias sobre las preguntas anteriores, pero aún no puedo cambiar el tamaño. Mi hoja de estilo está vinculada porque mueve los elementos al centro. Por favor avise lo que estoy haciendo mal. AIT
* { padding: 0; margin: 0; box-sizing: border-box; } .menuContainer { display: grid; place-items: center; height: 100vh; } .menuBox img { width: 300px; height: 300px; } <div class="menuContainer"> <div class="menuBox"></div> <h1 id="item">Food Item1</h1> <p id="oneLiner">Lorem ipsum dolor sit amet. Et deleniti officiis eos possimus omnis e! </p> <img src="https://img.freepik.com/free-photo/delicious-fried-chicken-plate_144627-27383.jpg?size=626&ext=jpg&ga=GA1.2.404766179.1658308353" alt="img" id="img"> <h2 id="hotel">Hotel name1</h2> <p id="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid deserunt pariatur dolorem quo necessitatibus quas voluptatibus eaque placeat soluta voluptatem?</p> <div class="btn"> <button id="prev"><img src=https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtb_on3v-MaK_PJ7IQW4odw2kfxHc9Tw_GkQ&usqp=CAU> </button> <button id="random">Random Menu</button> <button id="next">:arrrow </button> </div> </div><div class="menuBox"></div>versus
.menuBox img El código css se dirige a una imagen en un contenedor con la clase menuBox . En su ejemplo, el Contenedor no contiene la imagen.
Así que tu código se vería así:
* { padding: 0; margin: 0; box-sizing: border-box; } .menuContainer { display: grid; place-items: center; height: 100vh; } .menuBox img { width: 300px; height: 300px; } <div class="menuContainer"> <div class="menuBox"> <h1 id="item">Food Item1</h1> <p id="oneLiner">Lorem ipsum dolor sit amet. Et deleniti officiis eos possimus omnis e! </p> <img src="https://img.freepik.com/free-photo/delicious-fried-chicken-plate_144627-27383.jpg?size=626&ext=jpg&ga=GA1.2.404766179.1658308353" alt="img" id="img"> </div> <h2 id="hotel">Hotel name1</h2> <p id="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid deserunt pariatur dolorem quo necessitatibus quas voluptatibus eaque placeat soluta voluptatem?</p> <div class="btn"> <button id="prev"><img src=https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtb_on3v-MaK_PJ7IQW4odw2kfxHc9Tw_GkQ&usqp=CAU> </button> <button id="random">Random Menu</button> <button id="next">:arrrow </button> </div> </div>