0
345
Views¿Cómo hacer que las imágenes cargadas por los usuarios cumplan con el tamaño requerido por el borrador de diseño a través de CSS o JavaScript?
Hola a todos ~ Tengo un problema pero mi inglés no es bueno. ¡Haré todo lo posible para expresarlo completamente! Si la explicación no es lo suficientemente clara, todos son bienvenidos a decirme ~ El
El problema es así, ¡hoy hay un bloqueo para que los usuarios suban fotos! El ancho y alto de esta foto después de que el usuario la cargue no puede exceder los 360 px, el mínimo no puede ser inferior a 100 px, el alto máximo no puede exceder los 200 px y el mínimo no puede ser inferior a 100 px
. Lo que quiero preguntarles a todos aquí es si este requisito se puede cumplir solo con CSS. ¿O se puede lograr usando JavaScript? Pero si uso JavaScript, no sé cómo empezar, porque mi JavaScript es muy pobre. Espero poder obtener sus valiosas sugerencias aquí, gracias.
Escribí un ejemplo. El tamaño de la imagen original es de solo 50PX de altura. ¿Cómo puede la altura de la foto llegar a 100PX sin afectar la relación?
.photo{ width: 360px; height: 200px; object-fit:contain; object-position:left center } <div class="demo"> <img class="photo" src="https://upload.cc/i1/2021/09/30/s73jb5.jpg" alt=""> </div>
2 answers
Answer question0
Puede usar object-fit:cover para hacer que su imagen se expanda proporcionalmente para llenar su contenedor.
Establezca el contenedor en las dimensiones que desee, luego haga que la imagen lo llene configurando su ancho y alto al 100%.
Por defecto, la cover colocará la imagen en el centro.
.demo { width: 360px; height: 200px; } .demo .photo { width: 100%; height: 100%; object-fit: cover; /*object-position: left center;*/ } <div class="demo"> <img class="photo" src="https://upload.cc/i1/2021/09/30/s73jb5.jpg" alt=""> </div>0
Creo que esto es lo que quieres hacer.
La imagen debe tener un ancho máximo de 360 px y una altura mínima de 100 px.
Y también si desea agregar min-width y max-height , puede agregar la variable imageSettings en javascript.
Si tiene varias imágenes, simplemente agregue la clase imageContainerForJS al elemento principal img .
(()=>{ let imgContainers = Array.from(document.querySelectorAll('.imageContainerForJS')); const imageSettings = { "max-width": 360, "min-height": 100, } for(let imgContainer of imgContainers) { let img = imgContainer.querySelector('img'); if(!img) continue; let imageSource = img.src; let image = new Image(); let maxWidth = imageSettings['max-width'] || null; let minWidth = imageSettings['min-width'] || 0; let maxHeight = imageSettings['max-height'] || null; let minHeight = imageSettings['min-height'] || 0; image.onload = function() { let width = this.width; let height = this.height; if(maxWidth && width > maxWidth) width = maxWidth; if(minWidth && width < minWidth) width = minWidth; if(minHeight && height < minHeight) height = minHeight; if(maxHeight && height > maxHeight) height = maxHeight; imgContainer.style.width = width+'px'; imgContainer.style.height = height+'px'; } image.src = imageSource; } })(); .photo{ object-fit: cover; object-position: center; width: 100%; height: 100%; } <div class="demo imageContainerForJS"> <img class="photo" src="https://upload.cc/i1/2021/09/30/s73jb5.jpg" alt=""> </div>