I'm having some problems with two horizontal divs maintaining the same height.
If both contain an image it's fine, but as soon as I try to embed a youtube video in one of the divs the height starts to mismatch as the viewport is decreased.
The code used is this:
<div class="IndexBanners">
<div class="bannerimages effect first">
<iframe class="embed-responsive-item" frameborder="0" src="https://www.youtube.com/embed/GfaiXgY114U" height="99%" width="100%">
</iframe>
</div>
<div class="bannerimages effect">
<img src="http://placehold.it/795x436">
</div>
</div>
I've set up a fiddle so you can see the issue.
https://jsfiddle.net/grvbc42o/1/
Any suggestions?
Images are vertically aligned baseline by default and will leave a little bit of space at the bottom of their parent. If you give the image a vertical-align and change the height of the video to 100%, they align properly.
.IndexBanners {
display: flex;
margin-top: 20px;
}
.bannerimages {
flex: 1 0 0;
}
img {
max-width: 100%;
height: auto;
vertical-align: top;
}
#media (max-width:600px) {
.IndexBanners {
display: block;
}
.first {
position: relative;
padding-bottom: 56.25%;
height: 0;
}
.first iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
<div class="IndexBanners">
<div class="bannerimages effect first">
<iframe class="embed-responsive-item" frameborder="0" src="https://www.youtube.com/embed/GfaiXgY114U" height="100%" width="100%"></iframe>
<!--a href="http://placehold.it"><img src="http://placehold.it/795x436"></a-->
</div>
<div class="bannerimages effect">
<img src="http://placehold.it/795x436">
</div>
</div>
Is the height defined for your image. I would suggest adding
style="height: 99% width=100%"
within your tag.
If that does not work, I would suggest giving both the iframe and the img tags a mutual class, and defining desired height and width within the class. (and removing the height and width within the iframe tag.
Let me know if neither of those resolves your issue.
The <iframe> is definitely the issue here. They are a bear to work with, when trying to get them to behave responsively. Width is easy, height is not usually.
Following the Intrinsic Ratio technique discussed by Ben Marshall, I edited your Fiddle here: https://jsfiddle.net/grvbc42o/3/. That very much so appears to achieve your goals.
Related
I'm trying to learn bootstrap and built a website with a video background on top and text below it. When I reduce the desktop size screen to one of mobile size, a large gap appears in between the video and body text. Any help would be helpful in my pursuit to learn boostrap! Thanks so much.
I suspect it's a padding or margin problem? But why would it expand more when I make the browser window smaller?
HTML:
<body>
<div class = "container-fluid">
<div class = "row">
<div class = "header-container">
<div class = "video-container">
<div align="center" class="embed-responsive embed-responsive-16by9">
// video code removed (for succinctness)
</div> <!-- video responsiveness -->
</div> <!-- video-container -->
<div class = "col-md-12 text-center">
<h3>
TEXT
</h3>
</div>
</div> <!-- header-container -->
</div> <!-- row -->
</div> <!-- container -->
<section id="services">
<div class="row">
<div class="col-sm-3 col-sm-offset-2" id="red">
<h2 class="text-center">
Services
</h2>
<p class="text-justify">
// BODY TEXT removed (for succinctness)
</p>
</div>
CSS:
.header-container {
width: 100%;
height: 700px;
border-left: none;
border-right: none;
position: relative;
padding: 0px;
margin: 0px;
}
.video-container {
position: absolute;
top: 0%;
left: 0%;
height: 100%;
width: 100%;
overflow: hidden;
z-index: -1;
}
video { max-width: 100%; min-width: 100%; min-height: 100%; }
#services{
background-color: white;
height: 25px;
}
This does not appear to be a padding or margin issue.
You have added some custom CSS that specifies an explicit height on your header-container class, i.e., 700px. At the same time, however, You are placing the video in a responsive container by specifying Bootstrap's embed-responsive class, etc.
This essentially means that the video, IFRAME, or whatever you put within the responsive container will respond to the size of the screen, i.e., as the window's dimensions decrease, so do the content's. The actual height of what is in the container will be shorter as the screen gets smaller, probably a lot shorter than 700px; how short, just depends on the aspect ratio. You could enforce a min-height, specify auto or simply alter the design to flow more naturally, simply applying bottom/top margin as appropriate.
Bootstrap: Responsive embed
It may happen because you are already using the bootstrap class embed-responsive and again defining styles for the video tag. Try removing the styles for the video tag or just the min-height tag. That may be causing the problem
change the height in your header-container css class.
height: 700px;
change
height: auto;
You'll probably have to use media queries to adjust the container .head-container size.
Try something like:
#media (max-width: 1170px) {
.header-container {
height: 250px;
}
}
How do I get these pictures side by side with css I cant get it to work.
I tried everything but nothing is working for me and I cant find a tutorial for what I need on the web pls help me. and it has to be responsive.
HTML:
<div class="seizoenen">
<div class="container">
<img src="image/zomer.jpg" height="100%" width="25%" />
</div>
<div class="container">
<img src="image/herfst.jpg" height="100%" width="25%" />
</div>
<div class="container">
<img src="image/winter.jpg" height="100%" width="25%" />
</div>
<div class="container">
<img src="image/lente.jpg" height="100%" width="25%" />
</div>
</div>
Here is a JSFiddle.
https://jsfiddle.net/bs3fz70v/2/
if you want it to be responsive...
Change img tags to max-width and set this in CSS. This will scale image down once it hits smaller screens.
Focus on your parent and child element structure. Your .container width should be set to 25%, not your img tag.
You mentioned text overlay in your comment. Set .container (parent element) to position: relative; Set any tag (child element) within that .container to position: absolute;. Now you can set top or left any value within 100% and contain it within that .container. And since the img tag is max-width:100%;, it will take on full width of that container, which is 25%.
Also set height to auto so images aren't stretched.
CSS
.seizoenen{
width:100%;
}
p {
position: absolute;
top: 50%;
left: 50%;
}
.container{
display: inline-block;
width: 24%;
position: relative;
}
img{
max-width: 100%;
}
Hope this gets you started experimenting with more positioning
Hoi bart, its quite easy to do. Your container needs to be display: inline-block; this will place the images next to eachother. And to fill the space of the images make them width: 100%;
Right fiddle now
One thing wasn't really clear to me you want the images to scale to a smaller size aswell?
I'm making a basic header using divs and a nested img in a fluid layout. I'm a bit rusty on this and i can't for the love of me figure out how to ensure that the image nested in the div scales without scaling to the point where it becomes smaller its parent div.
EDIT: Updated the codepen link showing how using min-height won't work as it squeezes the image
HTML:
<div class="container">
<div class="item half">
<p>
Some text
</p>
</div>
<div class="item half">
<img src="http://dummyimage.com/hd1080" class="full-width">
</div>
</div>
CSS:
.container{
margin: 0 auto;
max-width: 1920px;
}
.item{
height: 300px;
float:left;
overflow: hidden;
background-color: gray;
}
.half{
width: 50%
}
.full-width{
max-width: 100%;
}
And for good measure a quick illustration of what is happening:
And an illustration of what i want to happen:
Edit: Note that the image here is not being squeezed, which is what happens if you set the image to have a min-height equal to its parent div. But rather the overflow is hidden. You can also see that i do not mind the images being cropped.
Any help appreciated.
You can add min-height equal to the div.item height to your image CSS
img {
max-width:100%;
min-height:300px;
}
I've managed to find the solution i wanted in this thread. The function i was looking for was object-fit.
I've used the following solution:
img{
min-height: 100%;
object-fit: cover;
}
Edit: quickly found out that this property is only properly supported by Firefox, Chrome and Opera. Use this polyfill to fix this on Safari and IE.
I am trying to put an image into my Website.
The image is in a div that hast got a fixed size.
The Problem is that the image stretches the whole div
when I use auto height in CSS.
The Image fits into its div setting its height and width to 100%:
Now I would like to keep the Image unstretched.
So I set the width 100% and the height as auto
as it is described here
After setting that the image is in a layer under the section below
but layers on the next part of the page.
here is the HTML Code I used:
<div class="section4">
<section class="half">
<div class="officePicContainer">
<img src="officePic.jpg" alt="New Office of MEGO" class="officePic">
</div>
</section>
<section class="half">
</section>
</div>
And The CSS Code:
.half {
height: 50%;
position: relative;
}
.half:first-child {
}
.half:last-child {
background: #950049;
}
.officePic {
height: auto;
width: 100%;
}
How can I resize the image and fitting into its parent div without stretching it? Is it still possible in CSS? Or is Java Script needed?
Thanks for help!
Create div and, the background-size:cover css tag and set position: fixed
<div class="demo" style="background-image:url(example.png);background-size: cover; background-position:center center;"></div>
<div><img src="http://www.engineering.com/Portals/0/BlogFiles/swertel/heart-cloud.jpg" width=100% /></div>
I want to get an embedded map effect like this one: http://themeforest.net/item/yalu-creative-multipurpose-template-html/full_screen_preview/4569177 except I need to do it with an iframe not JS like in the example.
My sections have a max width but the map's container is set to overflow:visible to allow the iframe to show through.
I have tried the following CSS on the map div and the iframe itself too:
display:block;
margin:auto;
text-align: center;
and they didn't work.
Please help... thank you.
My HTML:
<div class="section">
<h2>Where we are </h2>
<div class="map">
<iframe width="605" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=3-4+High+Street+Hitchin+SG5+1BH&aq=&sll=51.48931,-0.08819&sspn=0.868785,2.113495&ie=UTF8&hq=&hnear=3-4+High+St,+Hitchin+SG5+1BH,+United+Kingdom&t=m&ll=51.947915,-0.278864&spn=0.013226,0.051842&z=14&iwloc=A&output=embed"></iframe>
</div>
</div>
My CSS:
div.section {
width: 80%;
max-width: 600px;
margin: 0 auto 40px;
}
div.map {
margin: auto;
width: 100%;
height: 25rem;
}
I also have the following script going on, to set the iframe width depending on screen width (the default 605 width is there because iframes must have a set width in the HTML AFAIK:
if($(window).width() < 1100) {
$('iframe').attr("width", $(window).width());
}
else {
$('iframe').attr("width", "1100");
}
Fiddle here: http://jsfiddle.net/Ykx2w/
Ok, now I am confused. I would suggest to be more specific and clearly indicate what you are trying to achieve. Following the link you posted, I do not see any map, hence you may be talking either about id="main-slider" (which fills all available space, but not centered horizontally) or section id="main" (centered horizontally, but has static width). Which one do you need?
Also I updated my last sample to work under IE browser and auto fill all available horizontal space (resize the window): http://jsfiddle.net/Ykx2w/3/. If that's not what you need - try to describe better your need.
Ok, I did small changes here: centered iframe. Basically you need this CSS rule only:
div.map iframe {
display: block;
margin-left: auto;
margin-right: auto;
}