A user can create an inspiration via uploading an image or entering text.
view
<% if inspiration.image.present? %>
<div class="inspiration-image">
<%= link_to image_tag(inspiration.image.url(:medium)), inspiration %>
</div>
<% else %>
<div class="panel panel-default">
<div class="panel-body">
<%= inspiration.name %>
</div>
</div>
<% end %>
css
// for images
.inspiration-image {
display: inline;
img {
width: 50%;
margin-top: 2.5px;
margin-bottom: 2.5px;
position: relative;
overflow: hidden;
vertical-align: top;
height: 164px;
}
}
// for text
.panel-default {
box-sizing: border-box;
border-style: none;
position: relative;
width: 50%;
padding-bottom: 40%;
overflow: hidden;
background-color: #446CB3;
border-radius: 0;
display: inline-block;
margin-bottom: 0px;
border: 2.5px white solid;
}
//for text
.panel-body {
color: white;
width: 100%;
height: 100%;
text-align: center;
position: absolute;
font-size: 12px;
justify-content: center;
align-items: center;
display: flex;
}
Looks good with a set height:
But if the users increases or decreases screen size then a white gap develops for images, which is what I'd like to avoid with your help:
view
<% if inspiration.image.present? %>
<div class="panel panel-default" id="conditions">
<div class="panel-body">
</div>
</div>
<% else %>
<div class="panel panel-default">
<div class="panel-body">
<div class="white-link"><%= inspiration.name %></div>
</div>
</div>
<% end %>
css
#conditions {
background-image: url('goal-setting-conditions.jpeg'); # instead of this image, which I just used to test if it works, how can I make the image reflect whatever inspiration it is: <%= link_to image_tag(inspiration.image.url(:medium)), inspiration %>
background-size: cover;
}
This is the sort of behavior I was hoping for where no matter screen size image and text-boxes width and height equal each other:
Use jQuery to get add the image as a background in the parent div.
jQuery(document).ready(function() {
jQuery('.inspiration-image').find('img').each(function(n, image) {
var image = jQuery(image);
var thisurl = jQuery(this).attr('src');
image.parents('.inspiration-image').css('background-image', 'url(' + thisurl + ')');
});
});
In CSS set the background-size
on the div
to cover. Hide the image in the container.
.inspiration-image {background-size:cover;}
.inspiration-image img{opacity:0;}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.