Así que estoy desarrollando una página web y la sección superior de esta página tiene una pequeña columna en el lado derecho y, a la izquierda, una imagen que ocupa el resto de la sección y causa mi problema.
El problema es que la imagen se extiende más allá del tamaño de la pantalla del dispositivo y pierde el diseño de la página. Ahora no quiero cambiar el tamaño para que quepa, sino recortar el ancho extra de la imagen de acuerdo con el tamaño de la pantalla, para que se vea igual, pero no puedes desplazarte horizontalmente por la página, que es lo que estoy experimentando. ahora.
Realmente no sé si eso tiene sentido, pero si tiene alguna idea sobre cómo resolver esto, escríbalo aquí y lo intentaré.
Cambia su etiqueta img por un div con el fondo de la img (supongo que tiene la etiqueta img, no especificó). Entonces, el div no excederá los límites, independientemente del img dentro de él.
<div id="img"></div> <style> #img { background: url("your img"); } </style> // Use this instead of <img src="your img">Para recortar la imagen sin cambiar su tamaño, debe aplicar overflow: hidden; al elemento padre.
Para contrarrestar el padding del elemento principal, debe establecer un margin negativo que sea igual al padding del elemento principal.
div { padding: 20px; overflow: hidden; } img { margin: -20px; } /* for demonstration purpose only */ div { border: 1px solid red; } img { display: block; } <div> <img src="https://via.placeholder.com/900x200.jpg"> </div>