imagenes responsive de diferente tamaño dentro de divs de 200px con bootstrap

[phpnovatophp]

Hola a todos.
Estoy haciendo una web utilizando bootstrap 4 y por tanto quiero que sea todo fluido etc..

llevo dias atascado en lo siguiente sin que me salga como debe:

<div>
<img src... bla bla>
</div>

La anchura del div viene determinada por la clase col-sd-7 y col-12 en funcion de la resolucion. Pero la altura del div siempre sera 200px.

lo que quiero es que la imagen ocupe todo el div sin deformarse y teniendo en cuenta que la gente subira fotos de diferentes tamaños y resoluciones no se que tengo que hacer para que se vean todas bien.
No me importa que al ajustarse la imagen el div tape los margenes de las imagenes siempre y cuando la imagen salga centrada tanto verticalmente como horizontalmente.

Alguien puede ayudarme??
GrACIASSSSSS de antemano

[quad22]

Le puedes poner al <div>:

background: url(../img/imagen.jpg) no-repeat center center;
background-size: cover;

Y la imagen ocupará todo el div.

O bien:

background-image: url(../img/imagen.jpg);
background-size: 100%;
background-position: 20% 100%;
background-repeat: no-repeat;

Modificando el tamaño de la imagen para que se ajuste al alto del <div> y modificando la posición de ésta (background-position) de izquierda a derecha y de arriba a abajo.


Pero:

Si estás publicando imágenes subidas por usuarios deberás usar la función crop (php) para recortar previamente las imágenes antes de colocarlas en el <div>.

[Rafael]

La otra es asignar height al div y un overflow hidden para que se oculte el contenido.

A las imágenes ponles margin: auto.


También podrás usar algún min-height: 200px a las imágenes o cosas así, dependiendo del tipo de imágenes que se suban.

[caricatos]

Hola:

Lo de bootstrap no lo sé, pero me estoy acostumbrando en poner las imágenes dentro de un tag image dentro de un svg... con los atributos width, height, preserveAspectRatio y viewBox en el svg y las medidas de la imagen en el tag image, tal vez te resuelva el problema.

Saludos

[DragonX]

si las imagenes las cargas con <img src=""> podes utilizar la propiedad object-fit de CSS

Código CSS:

-o-object-fit: cover;
    object-fit: cover;
 

Slds.-