I want to control the height of a div so it's always at least 8rem tall and then grows as text wraps onto new lines. This text will be overlayed on an image that's pulled in with an img tag, so setting the height to grow based on the content will take into account the img tag as well as the text.
If I was using using background-image instead of inline img tags, this would be pretty easy to solve, but img tags are better for accessibility and have more functional support in static website systems like Gatsby.
So, I'm trying to set the height in such a way that takes into account the text only, and doesn't consider the child img tag.
I'm not a CSS master, so I'm wondering if there's a way to do that that I'm not considering.
Here's a codepen with more context: https://hod.ge/css-hgt
You can use min-height property to that div.
Ex:
div{
min-height: 8rem;
}
Ref: [1] https://www.w3schools.com/cssref/pr_dim_min-height.asp
More content you add the div height increases.
I exactly didn't get the image part. I will get back to you if I find any leads...
The idea of an overlay is a 'relative' positioned container with an image and a 'absolute' positioned text. The image is a responsive image so the image will maintain the correct aspect ratio on smaller screens. The text will be positioned somewhere in the container, use the top & left & width settings to adjust it for your layout.
After giving the overlay container the correct size, the image and text will respond to that size. As you asked for, the min-height is 8rem.
An example:
body {
font: 400 1rem/1.1 "Segoe UI", Arial, sans-serif;
}
.overlay {
position: relative;
width: 120px;
min-height: 8rem;
background-color: #eee;
font-size: 0.75rem;
}
.overlay-img {
width: 100%;
height: auto;
border: 0;
}
.overlay-text {
position: absolute;
top: 0.5rem;
left: 10%;
width: 80%;
text-align: center;
color: grey;
}
.overlay p {
margin: 0;
padding: 0 10px;
}
<div class="overlay">
<img class="overlay-img" src="https://picsum.photos/id/206/300/200">
<div class="overlay-text">Some text</div>
<p>The description of this photo.</p>
</div>
Related
I'm essentially displaying a banner image on a page. At the base of that image is an overlay (the abs. pos. div) with a semi-transparent background image to make a "see through" effect. Everything is positioned properly and working fine except the overlay at a width of 100% expands outside of my container div. I've tried setting the overflow to hidden of the container div but that does not seem to work. My parent container has a position relative as well. This is responsive so the overlay with need to shrink and expand to the image width. Here's my code:
.hero-img-wrap {
position: relative;
margin-top: 35px;
padding-left: 15px;
padding-right: 15px;
}
.hero-img-wrap img {
width: 100%;
height: auto;
}
.hero-img-wrap .trans-overlay {
position: absolute;
bottom: 0;
z-index: 9;
height: 19px;
background-image: url('../images/semi_transparent_white.png');
width: 100%;
}
<div class="hero-img-wrap">
<img src="images/banner_image.jpg" alt="">
<div class="trans-overlay"></div>
</div>
I could pull this off with JQuery but I'd like to avoid that. For what it might be worth - this code is within a Bootstrap 3 column.
Since you've defined the height, why not a negative value
position: relative;
top: -19px;
Just a thought, heres a fiddle for ya
http://jsfiddle.net/g11yggap/
Try
Width:inherit;
On overlay div
I've used the 'target / context = result' trick on a site I'm developing, but I've run into a fairly large issue: the equation returns a percent so long, I can't find a calculator to complete the equation without rounding. As you can see below, I've set the height to a percent instead of auto, as if the value is auto, it will chop of the bottom part of the div, which I need. So, I've set it to the nearest rounded decimal - looks fine at first, then resize and it becomes larger/smaller than I need it to be. For reference for what it should look like, it should be the same height as image next to it. I can't provide the image for copyright reasons, but the image size is 800 by 440 pixels. Just apply the second rule to it. Thanks.
#comment-1 {
width: 6.25%;
height: 30.09781790820166%;
padding: 20px;
float: left;
color: #FFF;
background-color: #CC521D;
font-family: "Lato", Arial, Helvetica, sans-serif;
font-size: 125%;
}
#image-1 {
width: 31.25%;
height: auto;
float: left;
margin-right: 20px;
}
EDIT: Just noticed, I forget to provide the context: the height is 1329px and the width is 2560px.
Height percent will be based on parent element width if parent element height was not set! That means you need another approach, one of the solutions would be: let your image container be relative, with padding left 6.25%, than your comment would be absolute with left, top, bottom: 0 (width can be calculated as 6.25/31.25*100). That way the image height would control comment height.
<style type="text/css">
.comment_and_image {
position: relative;
width: 31.25%;
padding-left: 6.25%;
float: left;
}
.comment {
width: 20%; /* 6.25/31.25*100 */
position: absolute;
left: 0;
top: 0;
bottom: 0;
}
.image {
height: auto;
width: 100%;
}
</style>
<div class="comment_and_image">
<div class="comment">text</div>
<img class="image" src="path_to_image.jpg" alt="Image" />
</div>
I've used skobaljic's answer, just a modified version. I've set the top and bottom rules to 0, as he said, but instead of leaving left at 0, I set the margin-left to 101.875, as it is the width of the image plus 15 pixels, exactly what I needed.
How can I keep the play button centred even if the the image/video size changed?
.image{
position:relative;
width:500px; //changed
height:300px;
}
Here is my example...
Attention: my images/videos haven't no specific size, so they can change according to their own size... This is just an example!
I set up three examples to show how you could solve this problem.
Please see the fiddle: http://jsfiddle.net/audetwebdesign/mxSkQ/
The HTML is essentially yours:
<div class ="image ex1">
<a href="#">
<img src="http://placehold.it/200x150" alt="video">
<span class="play">
<span></span>
</span>
</a>
</div>
I am using a demo image with configurable dimensions, 200x150 for example, easily changed for testing.
Example 1 - Image Size Determines Size of the Parent Container
.ex1.image {
position: relative;
display: inline-block;
margin-left: 50px;
}
.image a {
display: inline-block;
position: relative;
}
/* Gets rid of the extra white space that follows an inline element*/
.image img {
vertical-align: bottom;
}
If you want the .image div to shrink to fit the image, use inline-block to display.
The margin-left is optional, will depend on the rest of the layout.
Important: To center the play button motif, simply set the a tag to display as inline-block and your arrow-motif-span will position itself nicely.
Because img is an inline element, browsers insert a small space after it that can show up if you have borders or backgrounds. Use vertical-align: bottom to clean that up.
Example 2 - Parent Container Has A Specified Width
You can specify a width for the .image parent container and then use text-align to position the image element.
.ex2.image {
position: relative;
display: inline-block;
width: 400px;
height: auto;
text-align: center;
}
Example 3 - Parent Container Has Full Width and Specified Height
In this example, I let the parent container fill up the width of the window and set the
height to 200px. To get vertical centering, I set margin-top to a hard-coded value that will depend on the height of the image. If you let the image take on a fixed height, this example is useful.
.ex3.image {
position: relative;
display: block;
width: auto;
height: 200px;
text-align: center;
}
.ex3.image a {
margin-top: 25px;
}
You need
top: 50%;
left: 50%;
margin: -25px 0 0 -25px; // top and left equal to half of the size * (-1)
http://jsfiddle.net/nGKcn/13/
Try playing with the image size/different images.
Give the image CSS of:
display: block;
margin: 0 auto;
This is just a general way you put stuff in the middle.
Unless I'm missing something maybe?
I've gone through CSS validation (which did find some pesky unclosed tags, sorted now).
I'm trying to align an image to the top right side of my page, with title text on the top left.
I can do this, but when I resize the browser window the image always wants to overlap the title text before either of them resize. If I remove the margins that I've used to place the image then the image sits under the title text (and to the right) instead of just to the right of it, but I feel removing this (while keeping the positioning) might be key. I do need the image to be overlapped by some other elements though.
Here's a snippet of my code for the image:
img#site-logo {
max-width: 100%;
height: auto;
clear: both;
position: relative;
z-index: 0;
margin: -12.87em 2em -16em 0px;
}
And for the site title:
#site-title a {
font-size: 4.875em;
font-weight: bold;
line-height: 78px;
padding: 0px;
margin-right: auto;
white-space: nowrap;
z-index: 2;
position: relative;
}
Site is live here:
http://dominicpalma.com/
There are surely several different approaches to solve your problem.
But in my eyes it would be the best solution to set a min-width for your #page element.
#page{
min-width:900px;
}
I have played a little bit around with the width and think a min-width of 900 px fits best in your case.
I have an image container based on Jquery Mobile listview element structure.
Looks like this:
<li>
<div class="ui-btn-inner">
<div class="ui-btn-text">
<a>
<img src="img/products/l/demo2.jpg">
<h3>product2</h3>
</a>
</div>
</div>
</li>
I'm overriding JQM-CSS to create an image gallery-list. Images and h3 are both contained inside a link element. As the images can have different heights, I want to set a CSS fixed-height/overflow:hidden to the link element to cut off images at the top using vertical align: top.
Here is my CSS so far:
li {
display: inline-block;
min-width: 200px;
max-width: 300px;
width: 24%;
}
li img {
width: 100%;
position: static !important;
max-width: 185px;
max-height: inherit;
}
// fix height and overflow hidden
li a {
height: 100px;
overflow: hidden;
vertical-align: bottom;
}
It doesn't work... If I check on Firebug, the element-height is set to 100px, but it covers the image top versus covering the image bottom and h3, which I do not want to crop away.
I have tried setting line-height to 100px as well, but this does not work at all.
Any hints on what I'm doing wrong?
Thanks!
EDIT:
Can't use clip either, because I don't know at what height I want to start (img.height-100px) and I cannot clip from the bottom. Or can I?
SOLUTION:
It would work like this:
li a {
position:absolute;
bottom: 0;
left: 0;
}
li div.ui-btn-text {
position: relative;
height: 100px;
overflow: hidden;
}
Doesn't use vertical-align but the result is ok.
I'm afraid that can't work. Adding display:block; to your link and would be a start for your method, but check the result: http://jsfiddle.net/uu96D/
vertical-align: bottom; won't push the a tag to the bottom of the container. Here is a guide of how vertical-align works: http://phrogz.net/css/vertical-align/index.html
To solve your problem i'd go to some js solution, and add a negative top margin to the image if its taller than, for example, 80px. Here's a fiddle with the result: http://jsfiddle.net/uu96D/1/
And the code using jQuery:
$('img').each(function(){
var height = $(this).height();
if (height > 80) {
$(this).css({marginTop: "-" + (height-80)});
}
});