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?
Related
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>
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 am trying to align a div on top of my image. Horizontal alignment works fine, vertical offset however doesn't. Also, the background-color of #studentenlijn is not applied.
HTML Snippet:
<div id="container">
<div id="studentenlijn">STUDENTENLIJN</div>
<img src="http://lsvb.nl/s/lsvbheader.jpg" class="banner" />
</div>
Relevant CSS
#studentenlijn {
width: 10%;
height: 10%;
position: absolute;
top: 30%;
left: 72%;
background-color: #660000;
}
JSFiddle: http://jsfiddle.net/YGeLA/
Any ideas?
Your body had a height of 0, thus affecting the height of the containers within it when you try to specify a percentage height. Another problem was that you had a floating image within your container div, and thus you need to hide the overflow in order for the container to properly calculate the heights of elements within.
I have made some minor changes to your fiddle here:
http://jsfiddle.net/YGeLA/1/
I added:
height: 100%; to the body element
overflow: hidden; to #container which forces the container to respect the height of all elements within it.
The size of your div is:
#studentenlijn {
width: 10%;
height: 10%;
}
So it'll be a % of the parent element. The parent element, your container, is:
#container {
width: 100%;
height: 100%;
}
At this point, your browser can't determine which size should have your block.
So you won't be able to center it (Since you can't center an element which have not a browser-determined size).
You can't see the background-color for the same reason. It is applied, but you won't see your colored block because his size is 0.
Try to solve it, and it would be easier to center your div. In case it doesn't help you, edit your post with your modification :)
the container height is 0px. so you can't give height 100%
you have to set height in px
look at this update
#container {
position:relative;
width:100%;
height:100%;
line-height: 0;
}
.banner {
width:100%;
}
#studentenlijn {
width:200px;
height:30px;
position:absolute;
top:35px;
left:72%;
background-color:#660000;
line-height:30px
}
http://jsfiddle.net/YGeLA/2/
I am trying to set the width of the .full_height_div element using pure css, based on its height. It has to be width-relative-to-height, and not height-relative-to-width. The reason for this is that the parent container (.set_rectangle_height) is already a div with height relative to the page width. Obviously, as the page is resized the divs on the page will resize, so i cannot set a fixed width in px for the .full_height_div child.
So .rectangle and .set_rectangle_height make up the parent container which has a width as a percentage of the page and a height relative to this width. See here for an explanation for this method.
But the problem is that then I want to place a div inside the parent with height: 100% and width relative to this height. The aim is then that I will be able to alter the browser window size and everything will keep its aspect ratio.
here is my failed attempt:
.rectangle
{
position: relative;
width: 30%;/*the outermost div is always a % of the page
width, even while resizing*/
display:inline-block;
background-color: green;
}
.set_rectangle_height
{
padding-bottom: 30%;/*this sets the height of the outermost div
to a ratio of 1:3*/
position: relative;
float: left;
width: 100%;
height: 100%;
}
.full_height_div/*this is the div that i want to have a width relative
to its height*/
{
height: 100%;
width: 20px;/*i will delete this once .square_set_width is working*/
position: absolute;
background-color: red;
}
.square_set_width
{
display: inline-block;
padding-left: 100%; /*i want to use something like this line to set
the width of this div to be equal to .full_height_div's height - ie a 1:1 aspect
ratio, but padding-left does not work :( */
position: relative;
height: 100%;
background-color: blue;
}
<div class='rectangle'>
<div class='set_rectangle_height'>
<div class='full_height_div'>
<div class='square_set_width'></div>
</div>
</div>
</div>
So, this is what the above incorrect markup looks like:
And this is what i want it to look like:
I know I could find the blue square percentage height in javascript, then set the width to be equal to this height, but it would be really handy if there is a pure css fix for what I am trying to do. I will be using this structure a lot and I don't really want to go writing code to resize all the divs on my page.
you have to use javascript for that. If I understood you, you want a perfect blue square. Use
var height = $('.square_set_width').height();
$('.square_set_width').css('width',height);
here is a jsfiddle: http://jsfiddle.net/a8kxu/
Edit: instead of doing padding-bottom: 30% do height: 70% instead. Here is another fiddle: http://jsfiddle.net/a8kxu/1/
Edit #2: Sorry, but you cant use css to do this. Its not powerful enough
If i understand you correctly
you can do
#divID {
width: 75%;
margin-left: auto; // this is used to center the container
margin-right: auto;// this as well
}
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)});
}
});