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" />
Related
I'm developping an ionic application, and i want to display some images in some cards, the problem is that my images have not the some size, and i want them to look the some.
The idea is to use à css class that will solve the problem ( at least in the width )
.full-width-image {
width: 100%
}
this class will solve the problem of size and all the images will have the some width. how ever i dont know how to make a fixed height for them all. if i add to my css class a fixed height like:
.full-width-image {
width: 100%;
height: 60px;
}
some pictures will look ugly:
how it looks like
what i want is to hide the extra part of the image.
If you have a set width and height you can use object-fit: cover; for the image to fill the entire space without losing its aspect ratio.
I would recommend you to use a flex wrapper around an image.
.wrapper {
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 2px gray;
width: 100px;
height: 100px;
overflow: hidden;
margin: 1em;
}
.wrapper img {
border: 1px solid black;
max-width: 100%;
max-height: 100%;
}
.example {
display: flex;
}
<div class="example">
<div class="wrapper">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">
</div>
<div class="wrapper">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a">
</div>
<div class="wrapper">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg">
</div>
<div>
Using this technique you get a kind of smart image - it scales itself to fit your wrapper, its fixed size, but without distortion. Look, there are black borders around the images, so you can see that both an image with width > height and an image with a tree, where height > width, fit well the wrapper, restricting the width and the height correspondingly.
Also you can you inline-flex instead of flex in the wrapper class.
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.
In the middle of a webpage I want to display an image that stretches all the way from the left to the right side of the browser window.
When the window is resized the image should scale down proportionally but I need the visible height of the image, let's say 200px, should remain the same as there is a div on the image displaying text. I presume the "image window" is preserved by a containing div with a fixed height.
How do one accomplish this and get it working in the following browsers: ie8+, Chrome20+, FF20?
Just set width and leave the height empty, it will auto scale
img {
width: 100%;
}
As you want a set height you should wrap the image in a div with overflow hidden. It will scale as you want etc.
EDITED
DEMO http://jsfiddle.net/vYdBt/136/
img {
width:100%;
}
div {
width: 100%;
height: 200px;
overflow: hidden;
}
The website in your link uses a background image. This could be done like this
DEMO http://jsfiddle.net/kevinPHPkevin/vYdBt/135/
div {
background: url(http://lionssharedigital.com/wp-content/uploads/2013/04/Lion.jpg);
width: 100%;
height: 300px;
background-position: center center;
background-repeat: no-repeat;
background-size:100% auto;
}
This would center the image vertically too
Ah, the ever popular, "how do I do responsive images?" Well, in your cause it's business as usual other than you set a specified height on the image.
http://jsfiddle.net/aMhbz/1/
HTML
<div id="top"></div>
<div id="image">
<img src="http://lorempixel.com/1200/200/city/" />
</div>
<div id="bottom"></div>
CSS
#top, #bottom {
height: 50px;
}
#image img {
max-width: 100%; /* the responsive part */
height: 200px; /* same height as image */
}
My answer does a little extra targeting based on a image container. You could also do some thing like this:
HTML
<img src="your-image.jpg" />
<div>
<img class="set-height" src="your-image.jpg" />
</div>
CSS
/* for all images to be responsive */
img {
max-width: 100%;
}
/* specific images */
.set-height {
height: 200px; /* the height of your image */
}
I'm trying to scale images to the height of their parent which has a percentage height of its parent. This works as expected except in Chrome where the image won't scale its width proportionally once the height is reduced below the size at which it was first rendered. Any ideas on how to fix this?
<div>
<img src="http://placehold.it/100x100" alt="">
</div>
and the css:
html, body {
height: 100%;
margin: 0;
}
div {
height: 70%;
background-color: red;
}
img {
height: 100%;
width: auto;
}
JSFiddle
Removing the width property fixes this:
img {
height: 100%;
}
I'm not sure why this happens, but I'm guessing that making the width always at auto would fallback to the original width when the image is scaled down (this doesn't happen in most cases I've tried, but a certain combination might trigger it to happen that way). Not sure if it's by design or not, but I'll go ahead and try to report this somewhere.
Fiddle
Try using display: block; to make Chrome scale the image below the rendering-size:
display: block;
min-height: 100%;
height: 100%;
width: auto;
I have a gallery slider, with random images from the forum. So, the size is pretty random but the gallery(container frame) itself is fix sized. So, we decided to set the image height to a fixed size but the width is set to auto. This way, the image will not be squeezed inside the container if its ratio different is too much from the container ratio.
Then, I set the container's text-align to center in order to center the image. But, this only works for images smaller than the container. If the image is still bigger than the container (after resize), the image is aligned to the left instead.
The jsffidle example.
NOTE: Using background-image is not a solution because resizing background image currently is still not supported by many browsers (especially IE and some Chinese browsers).
Hope there is enough information here. So, how do I center the image in this situation?
I have found another solution
<style type="text/css">
.container {
width:600px; //set how much you want
overflow: hidden;
position: relative;
}
.containerSecond{
position: absolute;
top:0px;
left:-100%;
width:300%;
}
.image{
width: 800px; //your image size
}
</style>
and in body
<div class="container">
<div class="containerSecond">
<image src="..." class="" />
</div>
</div>
This will center your image whenever your container is bigger or smaller. In this case your image should be bigger than 300% of container to not be centered, but in that case you can make with of containerSecond bigger, and it will work
You would use max sizes:
img {
max-width: 200px;
max-height: 200px;
}
Take a look: http://jsfiddle.net/fabianhjr/zW6eh/
Edit: still having centring problems, I will get back to you on that.
I had similar problem, but the solution was about to crop right and left margin, while the image should be centered. Smaller images are stretched.
My solution is also in this JS Fiddle: http://jsfiddle.net/david_binda/9tTRQ/
HTML
<div class="thumb-wrapper">
<a href="" title="" class="img">
<img src="http://upload.wikimedia.org/wikipedia/commons/4/40/Tectonic_plate_boundaries.png" alt="" />
</a>
</div>
CSS
.thumb-wrapper{
width: 200px; // desired thumbnail width
height: 150px; // desired thumbnail height
overflow: hidden;
position: relative;
margin: 0 auto;
}
.thumb-wrapper .img{
display: block;
position: absolute;
width: 300px; // should be wider than final thumbnail
height: 150px; // desired thumbnail height
left: 50%;
margin-left: -150px; // half of above defined width eg. 300/2 = 150
}
.thumb-wrapper .img img{
width: auto !important;
max-width: 300px !important; // should be wider than final thumbnail
min-width: 200px !important; // desired width of thumbnail
height: 150px !important; // desired thumbnail height
margin: 0 auto;
display: block;
}
The solution that I've found is:
img{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);//You have to add all the prefixes
//of transform
}
div.container{
position:relative;
overflow:hidden;
}
Okay, I think this is your best solution.
You set your wrapper around each image to display: table; and then one more wrapper inside that with a display: table-row; and set your img's to display: table-cell
This way you can resize anyway you like while keeping the ratio.
http://jsfiddle.net/zW6eh/17/
You can also simply set your height: to 200px; This will keep your width auto by default.