0

me gustaria poder añadir unos circulos alrededor de mis 3 imagenes que yo pueda cambair su tamñado sin que afecte a la imagen.


<div class="row aling-items-center">

    <div class=" col-md-4">
    <img src="imagenes/veterinario.png" class="img-fluid fotoiconohouse " alt="Responsive image">
    </div>
    <div class=" col-md-4 ">
    <img src="imagenes/camioneta.png" class="img-fluid fotoiconohouse" alt="Responsive image">
    </div>
    <div class=" col-md-4 ">
    <img src="imagenes/movil.png" class="img-fluid fotoiconohouse" alt="Responsive image">
    </div>


    </div>

2
  • Encima o debajo de ellas?
    – BetaM
    el 13 oct. 2020 a las 17:08
  • encima , osea k el circulo rodee la imagen sin distorsionarla , vamso que se ve un circulo alrededorde la imagen y la imagen dentro. el 13 oct. 2020 a las 17:12

1 respuesta 1

0

Si quieres cambiar la altura o el ancho puedes cambiar width y height en .col-md-4.

Si quieres que la imagen tenga la forma de un círculo, puedes usar background-image como el ultimo ejemplo con imagenCirculo.

.col-md-4 img {
  max-width: 80%;
  padding: 25% 0;
}

.col-md-4 {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 2px solid #000;
  text-align: center;
}

.imagenCirculo {
  background-image: url('https://images.freeimages.com/images/large-previews/199/sunflowers-6-1392951.jpg');
  background-repeat: no-repeat;
  background-size: 150%;
}
<div class="row aling-items-center">

  <div class=" col-md-4">
    <img src="https://images.freeimages.com/images/large-previews/199/sunflowers-6-1392951.jpg" class="img-fluid fotoiconohouse " alt="Responsive image">
  </div>
  <div class=" col-md-4 ">
    <img src="https://images.freeimages.com/images/large-previews/199/sunflowers-6-1392951.jpg" class="img-fluid fotoiconohouse" alt="Responsive image">
  </div>
  <div class=" col-md-4 imagenCirculo">
  </div>


</div>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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