Responsive image with css

Question

Responsive image with css

Navigation

#1 by (0 votes)
#2 by (0 votes)
#3 by (0 votes)
#4 by (-2 votes)

1

I have a circular image which I want to make responsive, my problem is that it remains the same size. This is what I have

.image-cropper {
  width: 215px;
  height: 215px;
  position: relative;
  overflow: hidden;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}

.img_circular {
  background: #eee;
  display: inline;
  margin: 0 auto;
  height: 100%;
  width: auto;
}

<div class="col s2">
  <a href="#!user">
    <div class="image-cropper">
      <img class="img_circular" src="https://media-cdn.tripadvisor.com/media/photo-s/0d/12/d7/3b/img-20160923-wa0089-largejpg.jpg">
    </div>
  </a>
</div>

I share my jsfiddle

Thank you in advance

css3 css

asked by Dimoreno 20.09.2017 в 07:14

source

4 answers

Search data in the drop-down list from a text field Problem with JSON object [closed]

score 0 · Answer 1

Your image does not change in size, because you put a fixed size in .image-cropper

But you need that fixed size, to ensure that the image is square, before making it circulate. If you do not, the image instead of being a circle, will be oval (according to the proportion of the original image).

What I can think of, is that you make the square image using other units, like vh :

.image-cropper {
  width: 50vh;
  height: 50vh;
  position: relative;
  overflow: hidden;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}

You can learn more about these units in VH and VW units of CSS3

score 0 · Answer 2

0

In .img_circular you have a width with the value auto , change the car by 100%

.img_circular{
   ...
   width: 100%;
}

answered by 20.09.2017 в 07:19

score 0 · Answer 3

I made some changes to your code. My proposal is to use the image as a background image background-image . In this way you can apply background-size:cover; so that the image covers the whole element, and if you want it centered you can use background-position: center; . To stretch the box I use a pseudo element ::after where the padding-bottom: 100%;

.image-cropper {
  display:block;
  width: 50%;
  /*max-width:309px;*/
  position: relative;
  overflow: hidden;
  background-image:url("https://media-cdn.tripadvisor.com/media/photo-s/0d/12/d7/3b/img-20160923-wa0089-largejpg.jpg");
  background-size:cover;
  background-position: center; 

  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
}

.image-cropper::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

  <a class="image-cropper" href="#"></a>

I hope it's what you need.

score -2 · Answer 4

-2

How are you? I would use a max-width=100% and the units in rem or em . They have worked for me ... otherwise, with bootstrap4 you will renege much less. I hope it has helped you!

answered by 10.09.2018 в 17:45