Div doesn't take enough height

Asked Oct 08 '19 at 16:33

Active Oct 08 '19 at 16:43

Viewed 20 times

I have a div which has a background image property. The want the div to take at-least 240px width but should fit the screen if space is available. I want to maintain the ratio so i have set the height property to auto but still i get a cropped image in some cases. I am not an expert in css and any help would be appreciated. thanks.

<div class = "event">
  <div class="event-image"></div>
  <a href = "#learnmore" class = "learn-more">Corporate Event</a>
</div> 

.event {
  border: 1px solid grey;
  border-radius: 4px;
  min-width: 240px;
  min-height: 400px;
  width: 100%;
  height: auto;
}

.event-image {
  background: url('event.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  min-width: 240px;
  min-height: 200px;
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

edited Oct 08 '19 at 16:43

asked Oct 08 '19 at 16:33

lag

do you have a sample preference for your expectation ? – Duc Hong Oct 08 '19 at 16:41
see the pictures – lag Oct 08 '19 at 16:44
The image in `background` doesn't "size" the `div`, so it won't keep it at the image's ratio. An `` on the other hand does. – Asons Oct 08 '19 at 16:49
so what should i do? – lag Oct 08 '19 at 16:49
Check the dupe link, it shows how-to, and with that you simply use the image's ratio to make it happened. – Asons Oct 08 '19 at 16:51
the image has gone off the grid! – lag Oct 08 '19 at 16:56
the duplicate question doesn't answer my question. please remove the duplicate tag. – lag Oct 08 '19 at 16:58

Div doesn't take enough height

0 Answers0