On my page, the top center embedded YouTube video (iframe) fills the entire responsive container on Firefox, but for some reason it is displayed much smaller and only in the upper half of the container on Chrome:
HTML:
<div class='product_frame_wrap'>
<div class='product_frame'>
<div class='product_frame_image_vid'>
<iframe>...</iframe>
</div>
</div>
</div>
CSS:
.product_frame_wrap {
margin: 0 auto;
max-width: 600px;
position: relative;
width: 100%;
}
.product_frame {
background: rgba(0, 0, 0, 0) url("images/frame.png") no-repeat scroll 50% 50% / contain ;
padding-bottom: 75%;
position: relative;
}
.product_frame_image_vid {
bottom: 0;
left: 0;
padding-top: 5%;
position: absolute;
right: 0;
top: 0;
}
.product_frame_image_vid iframe {
height: 100% !important;
width: 100% !important;
}
If you look up browser specific css you can find hacks. The below code will only effect chrome browsers. When you set the iframe's height to 200% it seems to fill in correctly in chrome.
Adding the below snippet to your css should fix the problem:
#media screen and (-webkit-min-device-pixel-ratio:0) {
.product_frame_image_vid iframe { height:200%; }
}
Related
Background
I need to have an image larger than its container. The idea is to give the users the option to add full-width images to content pages, if they want to.
Problem
I used calc(100vw) with left: 50%; and translateX(-50%). This works perfectly in Chrome and Firefox. However, IE11 and Edge bring a horizontal scroll bar.
Code
HTML
<div>
<img />
</div>
CSS
div {
margin: 0 auto;
width: 400px;
}
img {
display: block;
left: 50%;
position: relative;
transform: translateX(-50%);
width: calc(100vw);
}
Fiddle
Here's an example so you can test and play: https://jsfiddle.net/Cthulhu/nbmy5mjf/1/
Question
How can I remove/hide the scroll bar from IE and Edge?
I thought this happened due to the way the image's position is being calculated. However, I noticed that Firefox and Chrome also show a scroll bar if I remove the display: block; from the image. Any ideas?
use
body {
overflow: hidden
}
or just:
body {
overflow-x: hidden
}
and drop the calc() it isn't doing anything there.
Snippet
body {
overflow: hidden
}
div {
border: 5px solid red;
margin: 0 auto;
width: 400px;
}
img {
display: block;
left: 50%;
position: relative;
transform: translateX(-50%);
width: 100vw;
overflow: hidden
}
<div>
<img src="http://randomrab.com/wp-content/uploads/2015/05/thumpimage.jpg" />
</div>
OK, this is a bit of a mouthful and very super specific. I will try my best to explain!
The goal is to maintain aspect ratio while scaling an image and keeping it vertically and horizontally centred inside a DIV that is defined only by percentages. The image needs to maintain best fit, so if max width is required then it's used and vice versa.
Use Firefox version 33 (or a few earlier versions) to view this js fiddle to see it working properly:
http://jsfiddle.net/3vr9v2fL/1/
HTML:
<div id="imageviewer" >
<div class="dummy"></div>
<div class="img-container centerer" id="imagevieweroriginal">
<img class="centered" src="http://chrisnuzzaco.com/couch/uploads/image/gallery/smiling_woman_wearing_drivers_cap.jpg" alt="Doctor Concentrating on Work"></img>
</div>
</div>
</div>
CSS:
#imagewrapper{
position:absolute;
width:69%;
height:100%;
top:0px;
bottom:0px;
background-color:gray;
}
#imageviewer{
position:relative;
width:100%;
height:100%;
}
.responsive-container {
position: relative;
width: 100%;
border: 1px solid black;
}
.dummy {
padding-top: 100%; /* forces 1:1 aspect ratio */
}
.img-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.centerer {
text-align:center; /* Align center inline elements */
font: 0/0 a; /* Hide the characters like spaces */
}
.centerer:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.centered {
vertical-align: middle;
display: inline-block;
max-height: 100%;
max-width: 100%;
}
The Problem:
I originally found my code here on stackoverflow and made a simple mod adding max-height/width to the .centered class. At the time, this worked in all major browsers. The only exception being Opera.
Vertically align an image inside a div with responsive height
There is a big problem however: the latest version of Chrome (Version 38.0.2125.111) no longer works with this code and my users prefer chrome to other browsers by a large margin.
Any ideas on how to solve this? Is this a bug with Chrome? I'm open to javascript suggestions to make this work again.
I came up with this: JSFiddle - centered image keeps aspect ratio in resizable fluid container
.container {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
.image {
position: absolute;
max-width: 100%;
max-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
body {
width: 100%;
height: 100%;
position: absolute;
margin: 0;
}
<div class='container'>
<img class='image' src='http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg'>
</div>
The image stays centered both horizontally and vertically. If the window is scaled down the image shrinks respecting original aspect ratio.
I didn't test it on all browsers though.
Take a look at CSS object-fit property:
You may need a polyfill for older browsers, though.
View browser support for object-fit.
i want to place text on top of the image inside container with width 80%
conainer.width 80% - code below not working
conainer.width 100% - code below working
screen shot of my brouser
<style type="text/css">
.conainer {
margin: auto;
width: 80%; /* change that to 100% code will work */
border: thin solid #000;
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
.image {
position: relative;
width: 100%; /* for IE 6 */
}
</style>
<div class="conainer">
<div class="image">
<img src="img/banners.jpg" width="100%" height="100%" />
<h2>some text gos here</h2>
</div>
</div>
You should just set the background of your div, instead of trying to place the h2 on top of an img tag
It works for me. Is there any more code?
I think the most code-efficient and compatible method would be to define your banner image as the background-image of div.image using CSS.
Replace your h2 style as
h2 {
position: fixed;//yours is on top of image but absolutely positioned, so not visible
top: 200px;
left: 0; //Specify where you want to put your image with top and left properly now.
width: 100%;
}
Ok! i found the problem change top 200 => top 0
h2 {
position: absolute;
top: 0px;
left: 0;
width: 100%;
I am working on a website and the client wants to have something similar to this: http://www.csszengarden.com/?cssfile=202/202.css
There are several overlays that are attached to the edges of the screen, while the text in the center is contained in such a way that the original browser scroll bars remain usable. This design is made elastic by allowing it to stretch at least vertically through an extra div.
The tricky part about my design: I have a fixed size div that is supposed to be centered both vertically and horizontally. What I need now are further divs that surround the centered div and expand as the user resizes their window, in order to serve as overlays to hide the text below them.
This is basically it: http://imgur.com/TNaTU
So broken down even further, what I need is a way to have the four surrounding divs automatically expand or reduce their size so they always fill up all of the screen.
Is there a way to do this without Javascript?
This won't work in IE7 without some crazy hacks, because IE7 does not support display: table and friends.
I will have a look at making this work in IE7 if it's a requirement for you.
Tested in IE8 and recent versions of Firefox, Chrome, Safari, Opera.
Live Demo (edit)
HTML:
<div id="top">top stretch</div>
<div id="middle">
<div id="middleContainer">
<div class="stretch">left stretch</div>
<div id="fixed">fixed</div>
<div class="stretch">right stretch</div>
</div>
</div>
<div id="bottom"><div id="bottomContent">bottom stretch</div></div>
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden
}
#top, #bottom {
position: absolute;
left: 0;
right: 0;
text-align: center
}
#top {
top: 0;
height: 50%
}
#bottom {
bottom: 0;
height: 50%
}
#bottomContent { /* you don't need this if bottom won't hold "content" */
position: absolute;
right: 0; bottom: 0; left: 0
}
#fixed {
width: 400px
}
#middle {
background: #ee1c24;
position: absolute;
width: 100%;
height: 300px;
top: 50%;
margin-top: -150px; /* height/2 */
left: 0;
z-index: 1
}
#middleContainer {
display: table;
width: 100%;
height: 100%
}
.stretch, #fixed {
display: table-cell
}
/* just for demo */
#top, #bottom, .stretch {
background: #b5e61d;
border: 5px solid #000
}
#fixed {
border-top: 5px solid #000;
border-bottom: 5px solid #000
}
I have a following HTML/CSS (simplified):
<body>
<style>
body
{
margin: 0px;
padding: 0px;
color: #fff;
background-color: #090909;
text-align: center;
}
#content
{
width: 500px;
margin: 0px auto;
background-color: blue;
}
#header
{
width: 500px;
margin: 0px auto;
background-color: green;
}
#over-div {
background-color: red;
position: absolute;
height: 20px;
width: 100%;
margin: 0px;
top: 0px;
left: 0px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-khtml-opacity: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;
}
</style>
<div id="over-div">aa</div>
<div id="header">
header
</div>
<div id="content">
content here
</div>
</body>
The idea is to have over-div to cover the upper part of the page completely (but do not keep it fixed there, so it is not visible when user scrolls down the page).
If you zoom-in extremely (Ctrl+ wheel) till the horizontal scrollbar appears, you can see that after scrolling completely to the right, the over-div does not cover the header completely to the right side of window.
I hoped that width:100% would mean "always use 100% width of the body", but it seems it is not true for absolute positioned divs.
Tested browsers: Firefox 3.5, Chrome, IE8 (with and without compatibility mode).
Is there any way to get that div cover 100% width of page?
Yes, add this to the #over-div styling:
min-width:500px;
That ensures that #over-div will be at least as wide as your #header and #content divs