Como posso mostrar apenas parte de uma imagem com HTML?

Eu quero mostrar apenas uma parte de uma imagem usando HTML/FBML em uma página de facebook. Transferindo e o corte não não uma opção, como as atualizações de imagem. Eu ouvi algo sobre um mapa de imagem, não sei se isso tem alguma coisa a ver com isso. Por favor me ajude. Obrigado. :) Eu sei que é possível. Eu já vi isso feito. Não necessariamente um mapa de imagem, mas algo que só mostra a parte superior de uma imagem. Talvez algum tipo de quadro. CSS funcionará em uma página no Facebook? Eu também gostaria de cortar uma pequena porção da parte superior.

Resposta

Dizendo que é impossível é tecnicamente correto, mas dificilmente úteis: não é possível com o HTML, mas é possível com CSS.

Colocar a imagem em uma div, então o estilo que a div com as dimensões que você quer e - aqui está a parte importante - diga a ele para esconder o estouro. Então com inline formatação você teria algo como:

<div style="width:100px; height:100px; overflow:hidden;">

<img src="myimage.jpg" alt="my image">

</div>

Se você quer apenas cortar o fundo, então não dê o div largura; e da mesma forma se deseja apenas cortar a borda direita, não dê o div uma altura.

Edit: CSS (1) sim, vai funcionar no Facebook.

(2) Corte a parte superior é muito mais difícil. Sem constrangimento, não sei como eu faria isso, embora tenho certeza de que é possível. Talvez definir imagem como fundo de um elemento e, em seguida, usar o background-position para ajustar onde ele vai? Mas não sei como que iria trabalhar com uma imagem que vai mudar, a menos que o nome do arquivo sempre permanece o mesmo...

Inscrever - receber um email se alguém adiciona novas respostas/comentários

Comentários

Adriana na 25 Jun 2023

Você pode usar a propriedade CSS "background-position" para mostrar apenas uma parte da imagem. Por exemplo, se você quiser mostrar apenas a parte superior da imagem, você pode usar "background-position: center top;". Quanto a cortar uma pequena porção da parte superior, você pode usar a propriedade CSS "clip" ou "overflow: hidden" em conjunto com um elemento HTML. Sim, o CSS funcionará em uma página do Facebook, desde que você tenha permissão para editar o código.

Espero que isso ajude! Boa sorte com o seu projeto. :)

Responder

O seu comentário

Acho que a resposta não está correta ou que você gostaria de acrescentar mais
alguma informação? Envie o seu comentário abaixo..