If I have the following markup:
<div class="video-wrapper">
<iframe src="link/to/video" frameborder="0"></iframe>
</div>
and styling:
.video-wrapper {
height: 100vh;
width: 100vw;
}
How do I get the video to display full width and height in the div, without having it have those black bars on the top and/or sides, regardless of aspect ratio?
Something like this:
.video-wrapper {
position:relative;
padding-bottom:56.25%; /* aspect ration for 16:9 */
/*padding-top: 20px;*/ /* you can add padding-top if needed */
height:0;
overflow:hidden;
}
.video-wrapper iframe {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
This will keep responsive your video for all screens.
Add class to frame tag
<div class="video-wrapper">
<iframe class="vid" src="link/to/video" frameborder="0"></iframe>
</div>
then in CSS upscale it using transform property and hide the overflow on video-wrapper class
.video-wrapper{
overflow:hidden;
}
.vid{
transform: scale(2.5);
}
Related
I have two blogs. I need to link those.
'one.html' of the 'website1.com' should load the 'website2.com'.
The address 'website2.com' should not be displayed, instead, it should show 'website1.com/one.html'.
It has to scroll without cutting the content (auto adjust height, based on the content/no. of posts) but scroll bar should not be visible.
I created an iframe and was able to hide the scroll bar as well, but it did not auto adjust the height. Either it does not show full content or shows half content.
Please provide the appropriate HTML, CSS, and/or Javascript code to do the same.
Thanks in advance.
<style>
#support-box {
width: 50%;
float: left;
display: block;
height: 20rem; /* is support box height you can change as per your requirement*/
background-color:#000;
}
#wrapper {
width: 90%;
display: block;
position: relative;
top: 50%;
transform: translateY(-50%);
background:#ddd;
margin:auto;
height:100%; /* here the height values are automatic you can leave this if you can*/
}
#wrapper iframe {
width: 100%;
display: block;
padding:10px;
margin:auto;
}
</style>
<div id="content" >
<div id="support-box">
<div id="wrapper">
<iframe name="frame" id="frame" src="website2.com" frameborder="0"></iframe>
</div>
</div>
</div>
Demo : https://jsfiddle.net/umd2ahce/6/
I want to know that is there any way to resizes the img tag image without using media queries. I searched for it and tried all the answers but nothing worked for me. When I see the screen in windows system it shows the normal one screen display, when I see on normal screen laptop and macbook pro 13 inch it scrolls and when I reduce the window size to 75% in chrome it fits the one screen layout.
I tried to reduce the font-size for eg: font-size:2vw; Its working fine but i tried CSS:
max-width: 100%;
width: auto\9; /* ie8 */
height: auto;
not working.
Is there any way or any script to make the layout in one screen and resize the image tag automatically. I don't want to use media queries
Just add the "width:100%"
e.g.
<img src="http://dummyimage.com/1200x400/000/fff" style="width:100%"/>
If you are looking for anything else. please edit the question and add the screenshots.
UPDATED
Try this:
#images{
max-width:50%;
border:1px solid;
float:left
}
#images .image{
float:left;
padding:10px;
width:25%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;}
<div id="images">
<div class="image"><img src="http://dummyimage.com/80x100/000/fff" style="max-width:100%"/><br/>Test Text</div>
<div class="image"><img src="http://dummyimage.com/80x100/000/fff" style="max-width:100%"/><br/>Test Text</div>
<div class="image"><img src="http://dummyimage.com/80x100/000/fff" style="max-width:100%"/><br/>Test Text</div>
<div class="image"><img src="http://dummyimage.com/80x100/000/fff" style="max-width:100%"/><br/>Test Text</div>
</div>
Hope it works for you.
Please add width:100% and height auto properties to img tag so that it will be responsive.
eg:
img{
width:100%;
height:auto;
}
Make image responsive without media queries:
img {
width: 100%;
height: auto;
}
<img src="http://lorempixel.com/400/300" alt="">
To make image responsive and no scrollbars:
html, body { height: 100%; margin: 0; padding: 0; }
img {
width: 100%;
height: 100%;
display: block;
}
<img src="http://lorempixel.com/400/300" alt="">
Make image responsive with constraints:
img {
width: 100%;
height: auto;
max-width: 500px;
}
<img src="http://lorempixel.com/400/300" alt="">
I have a banner. In that banner is an image. When you resize the viewport/browsers width the image is scaled to a smaller size to fit the window.
Notice how when you resize the browser, as the image gets smaller, it moves in an upward motion away from the bottom of the div.
I want the bottom of the image to stick to the bottom of the div always. Regardless of size.
Heres my JS FIDDLE
HTML
<div class="wrapper">
<center>
<div class="imgWrapper">
<img src="http://lorempixel.com/500/300/">
</div>
</center>
</div>
CSS
.wrapper {
background:#777;
width:100%;
height:400px;
display:block;
}
.imgWrapper {
width:100%;
max-width:500px;
display:inline-block;
margin-top:100px;
}
.imgWrapper img {
width:100%;
}
I want the bottom of the image to stick to the bottom of the div always. Regardless of size.
Add position: relative to the parent element and position: absolute; to the child element (along with bottom and left values).
DEMO
This will do it for you https://jsfiddle.net/eaxe2sww/4/
.wrapper {
position: relative;
background:#777;
width:100%;
height:400px;
display:block;
}
.imgWrapper {
width:100%;
max-width:500px;
position: absolute;
bottom: 0;
left: 50%;
transform:translateX(-50%);
}
I am a very new web developer. I am currently coding a simple wordpress landing page and I wanted to add some functionality to darken and add text when the user hovers the mouse over said image. It truly should be something quite simple.
For an example that actually implements the same wordpress theme and does it right.
in the "about us" section of the page above, they have pictures that have the exact same functionality I need for hovering, yet I have no idea how they did this.
If you need any more clarification, please do not hesitate to ask, I am not sure if my lexicon is correct/clear at all.
DEMO
Just show the white background element with opacity and the content element when wrapper is mouse over. Note that you need to you need to separate the content from the background element so the background's opacity won't effect the content.
<div class="wrap">
<div class="content">This is the content</div>
<div class="bkg"></div>
</div>
.wrap {
background-image:url('http://www.online-image-editor.com/styles/2013/images/example_image.png');
width:475px;
height:365px;
position:relative;
}
.wrap:hover .bkg {
display:block;
}
.wrap:hover .content {
display:block;
}
.bkg {
background:#fff;
opacity:0.5;
position:absolute;
width:100%;
height:100%;
display:none;
z-index:1;
filter: alpha(opacity=50);
}
.content {
width:100%;
height:100%;
display:none;
z-index:3;
position:absolute;
}
This is a css transition on hover.
See a live demo here
Here is the setup html:
<div class="container">
<div class="bottom-layer"></div>
<div class="overlay">
<h2>Hi there!</h2>
</div>
</div>
The container has a positioned overlay that fades in over the bottom layer content.
Here's the driving css:
.container,
.bottom-layer,
.overlay {
height: 100px;
width: 200px;
}
.container {
position: relative;
}
.bottom-layer {
background-image: url(http://rndimg.com/ImageStore/OilPaintingBlue/200x100_OilPaintingBlue_ede2e8a97ced4beb86bde6752ae5cfab.jpg);
}
.overlay {
position: absolute;
top: 0;
left: 0;
opacity: 0;
background-color: rgba(255,255,255, .1);
transition: opacity 0.6s;
}
.container:hover .overlay {
opacity: 1;
}
The two important parts are the positioning and the transition. The overlay has to be absolutely positioned to render over the element on the same level (its "sibling"). We set the opacity to 0, but set it to 1 when the parent is overlayer.
Then, we just tell it to run a transition whenever the opacity changes..
I'm using cross slide script.
The problem is I can't move the div to the background: slideshow overlapping all other divs. Tried to change z-index: Set z-index 0 to background div, and z-index:2 to all other divs. Still no success. Is there anyway to apply slideshow to the background div?
My css strcture looks like that
<body>
<div id="bg">
"all stuff goes here"
</div
</body>
And css for #bg
#bg {
/* Stretch background */
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
z-index:0;
}
Set css to:
#bg {
/* Stretch background */
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
z-index:0;
}
#test {
position: relative;
background-color: red;
z-index:5;
width: 120px;
margin-top:5px;
}
and html to:
<body>
<div id="bg"></div>
<div id="test">"all stuff goes here"</div>
</body>
Also see my jsfiddle.
Take it to the background with z-index: -1
instead of making z-index:0 or -1 to your "bg" id, make all other content z-index to 99 or more than that. so your "bg" will be back of your slides.
Do you observe the (complex) rules for stacking contexts, positioning, and z-index correctly?
https://developer.mozilla.org/en/Understanding_CSS_z-index/The_stacking_context