This question already has answers here:
Maintain the aspect ratio of a div with CSS
(37 answers)
Closed 1 year ago.
I have youtube embed
<iframe id="you" style="max-width:100%;" width="672" height="378"
src="https://www.youtube.com/embed/rMCILWXXXXX">
I set max-width:100%; for mobile phone.
When screen size is under 672, iframe is made to be smaller.
However height doesn't , even I set height="auto" it doesn't keep proportional.
How can I do this??
I can not do this with only css??
I need to use jquery or something to keep ratio?
You can use the property aspect-ratio
iframe{
aspect-ratio: 16 / 9;
}
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
I usually add a wrapper around the iframe and set the height and width of the wrapper to 100%. Then you can give the iframe a max-width and max-height of 100%.
I also removed margin from the body and border from the iframe to make to prevent a scrollbar from appearing.
html, body {
height: 100%;
margin: 0;
}
div.wrapper {
width: 100%;
height: 100%;
}
iframe#you {
max-width: 100%;
max-height: 100%;
border: unset;
}
<div class="wrapper">
<iframe id="you" width="672" height="400" src="https://www.youtube.com/embed/rMCILWXXXXX"></iframe>
</div>
Related
I want to make a gif image responsive to resize it to cover the width of every mobile device. This is because for some reason I can get a video to autoplay in certain IOS devices, so I though of converting the video into a gif. Now, how can I make it responsive? I don't really care about the height, is more of a width problem.
this is my oode so far:
.box {
width: 500px !important;
}
<div class="box">
<img src="examplegif" alt="Example gif" style="width:340px;height:170px;">
</div>
you have to set the maximum width to the image or video in this case of the gif.
<style>
.box {
display: flex;
justify-content: center;
}
img {
max-width: 100%;
height: auto;
}
</style>
<html>
<body>
<div class="box">
<img src="https://media.giphy.com/media/VRhsYYBw8AE36/giphy.gif" alt="Example gif">
</div>
</body>
</html>
The first step would be to remove width: 500px from the parent container .box. This explicit width restricts the image from being able to fill the entire viewport since it's parent containers width is only 500px. Next, there is an 8px default margin on the <body> from the user agent stylesheet. Using margin: 0 within the body styling will ensure there isn't any extra space around your content.
To make the GIF responsive and fill the entire viewport width, you can add some styling to the nested <img> elements in .box. I gave the images a width and max-width of 100% to ensure they take up all the available space. For the image height, use height: 100% to make sure it's 100% of the containing blocks height or height: auto to let the browser calculate and select a height for the specified element. Try this out.
body {
margin: 0;
padding: 0;
}
.box{
width: auto;
}
.box img {
max-width: 100%;
width: 100%;
height: auto; /* vary this to your needs ie auto, 100%, etc */
margin: 0 auto;
}
<div class="box">
<img src="https://media.giphy.com/media/ZqlvCTNHpqrio/giphy.gif" alt="Example gif">
</div>
You can make your image responsive by applying the following class to your image.
CSS:
.responsive {
max-width: 100%;
width: auto;
height: auto;
}
and HTML:
<img src="ypurgif" class="responsiveImage" />
This question already has answers here:
Maintain the aspect ratio of a div with CSS
(37 answers)
Closed 2 years ago.
I want to have my image always have a fixed aspect ratio (1:1 in my use case, but an ideal solution would work for any aspect ratio) such that the image always takes 100% of the parent's width (which is not static), and the height is calculated based on the given aspect ratio.
I am aware of the CSS trick of using a <div> with styles width: 100%; padding-top: 100%; and then setting the image as the div's background via a CSS url, however I would like to do this with the built-in image tag. My reason is that I am using the onload and onerror properties of the <img> tag, and these would be lost using the div trick.
I have tried the following things:
Attempting to use the same div trick, except applying the width: 100%; padding-top: 100% to the <img> tag. This does not work.
Retrieve the width value of the parent, then setting the height value of the image using JavaScript. This works, but a CSS solution would be much nicer.
This can be done using the following HTML/CSS, thanks to the commenters.
HTML:
<div class="wrapper">
<img class="image" src="img.png" />
</div>
CSS:
.wrapper {
position: relative;
width: 100%;
padding: 100%; /* change this based on your desired ratio */
}
.image {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 2 years ago.
I want to have a div scale relative to the size of my window, whether that be because I am on mobile or I scale the browser. However when I try to set the size of my div to something like
div {
width: 80%;
height: 50%;
background-color: grey;
}
It doesn't work. I have read around and it seems that I need to define a reference div, but that wouldn't make this div scale to the screen. I think the <meta> tag would fix things, but I am using codepen.io for this project and I don't know if I can include that since the only html they ask for is anything in the body.
The % unit is relative to the parent element, not the viewport. If you'd like to set the dimensions of an element relative to the size of the viewport, you can use the vw (viewport width) and vh (viewport height) units. These work similar to percentage-based units (1vw is 1% of the viewport width).
div {
width: 80vw;
height: 50vh;
background-color: grey;
}
You will need to set the height for the parent element because height: 80% is relative to the height of the parent. Try this:
html {
height: 100%;
}
body {
height: 100%;
}
#test {
background: #ff0000;
height: 80%;
width: 50%;
}
<div id="test"></div>
This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 2 years ago.
I am trying to display a rectangular image in html/css but the image area is being displayed as a square. Meaning that the image displays properly but there is a blank space above and below the image.
I've tried setting image height and width on the image attribute in html but still no luck.
<img src="images/countries/071-serbia.png" style="width:360px;height:240px;">
and css
img{
display: block;
max-width:auto;
max-height:240px;
width: auto;
height: auto;
}
What am I doing wrong? Image size should be width 360 height 240.
That is because you have not done a CSS reset.
Try:
* {
padding: 0;
margin: 0;
}
img{
display: block;
max-width:auto;
max-height:240px;
width: auto;
height: auto;
}
<img src="http://lorempixel.com/360/240/" style="width:360px;height:240px;">
Try writing the attached code it will surely work and if it doesn't let me know in the comments I will try my best to help you.
I have a suggestion for you that instead of px and %, Use Viewport Units like vw for width and vh for height because it will help you make your webpage responsive.
img{
display: block;
max-width: 26.354vw;
max-height: 36.529vh;
}
<!DOCTYPE html>
<html>
<head>
<title>Images</title>
</head>
<body>
<img src="Images\sample1.jpg">
</body>
</html>
I have 2 div's named first and second and I have set the width and height of them as 100%
.first{
width : 100%;
height : 100%;
}
.second{
width : 100%;
height : 100%;
}
now I would like to add an image in each div. These images should fill in the entire div.
<img src="someimage.png" width="100%" height="100%"/>
My problem is the image should not be stretched it should be filled the entire screen. I have used img img-responsive classes to achieve this. The image is now getting filled without stretching but when resized it is getting resized uniformly and the height of it is also getting decreased hence the image's height is now not getting filled 100%. Is there any way to achieve width and height of an image to cover the entire screen without stretching and decreasing the height?
Check this out, and you should use width: 100% beside min-height: 100% but i recommend you to use background-image with background-size: cover
.first{
width : 100%;
height : 100%;
}
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.first img {
width: 100%;
min-height: 100%;
}
<div class="first">
<img alt="" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=500%C3%97500&w=500&h=500"/>
</div>
jsFiddle
I use imgLiquid this is a jQuery Plugin to resize images to fit in a container.
https://github.com/karacas/imgLiquid
It's super easy to use and light weight.