0

Hola amigos mi consulta es esa necesito mostrar solamente una porcion de una imagen . Hay alguna forma de especificar que parte de la imagen se vea? usando css o no se si la etiqueta img tiene algunos parametros para dicho caso. Si alguno sabe seria de gran ayuda gracias :).

3
  • 1
    Qué es lo que has intentado hasta hora? Commented el 21 nov. 2019 a las 18:43
  • bueno probe con background-position pero con las pripiedades top center bottom Commented el 21 nov. 2019 a las 18:45
  • Si te ha servido alguna de las respuestas deberías marcarla como aceptada.
    – user7176
    Commented el 22 nov. 2019 a las 7:08

2 respuestas 2

2

existe la propiedad background-position en CSS, la cual te permite colocar la imagen, segun las coordenadas que le indiques.

.img{
  height: 75px;
  width: 75px;
  background: url("https://media.istockphoto.com/vectors/contact-info-icon-vector-id889473166?k=6&m=889473166&s=612x612&w=0&h=L8ak00zJlTx4XaJ6dpEVBNuSgrY9hfH0t0pCCeud11Y=");
  background-position: -55px -25px;
}
<div class="img">

</div>

Como ves, la imagen es una imagen llena de iconos, y en el ejemplo solo se muestra 1. A mi contenedor div.img, le coloque un tamaño con width y height para conseguir el objetivo

El primer valor mueve de derecha a izquierda y el segundo de arriba a abajo

Esta es la imagen originalintroducir la descripción de la imagen aquí

1
  • gracias amigo creo que esto es lo que busco Commented el 21 nov. 2019 a las 18:46
0

Puede que esto te sirva:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 200px;
  height: 600px;
  object-fit: cover;
  object-position: 30% 5%;
}
</style>
</head>
<body>

<h2>Image</h2>
<img src="paris.jpg" alt="Paris">

</body>
</html>

Para mover puedes cambiar los valores de object position.

La probe con la siguiente imagen:

introducir la descripción de la imagen aquí

1
  • gracias por responder amigo. Lo voy a probar aver que tal de momento pareciera que puede servir. Commented el 21 nov. 2019 a las 18:27

Tu Respuesta

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

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