Como recortar uma imagem usando CSS para adaptá-la a diferentes dispositivos

B

brightsea

Beta

Usuário com poucas negociações! Use sempre o saldo do ForoBeta!

• 29/10/2017

• #1

Hola!

Tengo una imagen de cabecera que es cuadrada y en mobile queda bien, pero en desktop queda demasiado grande.

Lo ideal sería que no mostrara un 25% de arriba y un 25% de abajo para que parezca como rectangular. He intentado usando overflow: hidden; pero no lo logro.

Alguna idea con esto?

Muchas gracias!

 

R

reilue

Gamma

• 10/01/2018

• #2

Utiliza un breakpoint, (ejemplo 1024px) y luego le aplicas lo que tu le has comentado:

Utiliza esta herramienta para poder ayudarte mejor.

Un editor de texto
Create a new fiddle - JSFiddle

 

K

KimeraCSS

Curioso

Usuário com poucas negociações! Use sempre o saldo do ForoBeta!

• 30/01/2018

• #3

Puedes ponerle un tamaño fijo al contenedor de la imagen no se
500px
Y la imagen la centras vertical y absolutamente.

 

P

ProHatake

Alfa

Programador

Usuário com poucas negociações! Use sempre o saldo do ForoBeta!

• 30/01/2018

• #4

Al contenedor ponle un max-height y un overflow hidden
y a la imagen que estara dentro de dicho contenedor ponle width 100%

EJEMPLO
An Anonymous Pen on CodePen