Ajustar Imagen en div css en elemento + problema clearfix

Hola tengo unos div que me muestran imagenes, el coigo css es este:

<style>  .producto{     display: inline-block; 	width:25%; 	height:50%;     padding:10px;     background: rgba(232,232,232);     color:#333; 	margin:5px; 	    }     .img_producto{ 	height: 100%; 	max-width: 100%; 	object-fit: cover; 	-webkit-border-radius: 6px;     border-radius: 6px;     background-color: #BDBDBD;     background-position: bottom right;     background-repeat: no-repeat;     background-size: cover; 	background-attachment: inherit;  	    }     .name_producto{        padding:10px;        color:#fff;        background:#ff0000;        text-align: center;        font-size:18px;    }    </style>

PREGUNTAS:

La imagen son de diferentes tamaños, me gustaria que se ajustaran al div .producto (el tamaño de las imamgenes estan descritos por .imgproducto) estoy intentando que sea resonsive, probando lo de % en vez de px.

Que la imagen se centre en el div, en mi caso se va a la izquierda, creo que es por el background-position pero cambio como veis en el codigo y no hace nada. Todo el contenido lo tengo a la izquierda de la pantalla, me gustaria que se centrara (toda la pagina web) que són los div estos y que fuera responsive.

I la ultima pregunta es veo que muchas paginas web cuando veo los div que tienen tienen el elemento clearfix, yo lo he probado en mi pagina y se van todos los div a la izquierda en vertical y no en horizontal como yo lo quiero. No se por que alguien me lo podria aclarar.

Muchas gracias, he estado buscando mucho pero no logro solucionar estos problemas.