Ayuda a cambiar el tamaño y recortar cualquier imagen dinámicamente para una posición predefinida en una página web. La imagen redimensionada y recortada se utiliza en las páginas web. Hay una manera en la que podemos mover la imagen recortada dentro del div.
- Anchura y altura regulares que aprietan la imagen para que encaje en esa posición predefinida.
Ejemplo:<!DOCTYPE html><html><head><!-- Style to set the height and widthof image --><style>img {width:200px;height:120px;border:2px solid green;}</style></head><bodystyle="text-align:center"><imgsrc=</body></html>Producción:
- Anchura, altura y posición de fondo regulares utilizando la imagen como imagen de fondo que encaja en esa posición predefinida (recortada al azar).
Ejemplo:<!DOCTYPE html><html><head><style>div {background-image:url(width:200px;height:120px;background-position:center;border:2px solid green;}</style></head><body><center><div></div></center></body></html>Producción:
- Es el procedimiento final para recortar la imagen y también se puede cambiar el tamaño. En este método podemos mover la imagen dentro del div. Use el margen negativo para mover la imagen dentro del div.
Ejemplo:
<!DOCTYPE html><html><head><style>.crop {width: 200px;height: 120px;overflow: hidden;border:2px solid green;}.crop img {width: 450px;height: 300px;margin: -30px 0 0 -280px;}</style></head><body><center><divclass="crop"><imgsrc=alt="cropped image"></div></center></body></html>Producción:
Publicación traducida automáticamente
Artículo escrito por Sabya_Samadder y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA