I have 1 image (1081*1921) that I am trying to display on different screen sizes.
<img src="images/2 copy.jpg" alt="" height="100%" width="100%"/><br/>
But it does not fit mobile screens.
So please give me any idea about Image fit to any Mobile height or any Browser height.
Apply this to your css:
img { max-width:100%; }
This will change the width to a maximum of 100% (device width)
Remove the height and width attributes and use
max-width: 100%;
this will make sure your browser shows the entire image.
hi dear friends please check it this Link DEMO
HTML
<div class="res-image-wrapper">
<img src="http://www.ukafh.co.uk/communities/4/004/008/327/664//images/4581542034.jpg" /> </div>
CSS
.res-image-wrapper{
max-width:90%;
height:auto;
position: relative;
display:block;
margin:0 auto; }
.res-image-wrapper img{
max-width:100% !important;
height:auto;
display:block;
}
Related
I have the following design
How do I keep these 2 images stay side by side and when the browser shrinks the two should shrink proportionally maintaining the proportion and height. Can't use bootstrap columns properly and display inline-block isn't working for me either. This is driving me crazy. Can anybody help me?
Give a % width to each according to their ratio.
img {
padding: 1%;
width: 64.3%;
}
img + img {
width: 31.5%
}
<img src="http://lorempixel.com/940/400" /><img src="http://lorempixel.com/460/400" />
https://jsfiddle.net/2028L68u/1/
CSS -
img{
display:inline-block;
}
#img1{
width:67%;
float:left;
}
#img2{
width:33%;
float:left;
}
HTML -
<img id="img1" src="http://www.sixdegreesdigitalmedia.com/wp-content/uploads/2016/06/Google-Tools-part-two-940x400.jpg" />
<img id=img2 src="http://kitengelaterraces.com/wp-content/uploads/2015/09/Slider-460x400.jpg"/>
I have different size images say (1920 by 1080).
I want to fit this image in an div having styles
I see the css file in which styles are given as
.detail-img{ width:100%; max-height:350px; overflow:hidden; margin-bottom:30px;}
.detail-img img, .detail-img-a img{width:100%;}
.detail-img-a{ width:100%; margin-bottom:15px;}
In html page div is like
<div class="detail-img">
<img src="<%= #event.avatar.url %>">
</div>
original image is
But it displays as
Is there a way to fit this my div?
You have to set max-width for the image
.detail-img img{
max-width: 100%;
}
I have an image that I want to resize when the width of the page/screen changes.
This code almost does what I want:
.section
{
position:relative;
min-width:600px;
max-width:1200px;
height:auto;
margin-left:auto;
margin-right:auto;
overflow: hidden;
}
.image
{
position:relative;
display:inline-block;
vertical-align:top;
width:100%;
height:auto;
}
<div class="section">
<img src="long_img.jpg" class="image"/>
</div>
The problem is, the image is 2560px wide, and the section is only 1200px. The image gets squashed horizontally to fit, which scales the height down. But, when the page is at it's max width(1200) I want the image to be at full height(400). So I need the image to hang over the edge, but still automatically resize.
The reason I don't just crop the image is because I want to scroll it with a css animation.
I've tried .image{ margin-right:-1360; } but it had no effect.
Use a media query after the css that you have there. This will remove the 100% declaration and let the image be it's natural size.
#media(min-width:1200px) {
.section img {
width: auto;
display: block;
}
}
Also, take away the overflow:hidden from the containing div.
See this fiddle for an example.
I am trying to resize image using css only.
It is resizing but for some reason it is not stretching to 100% of the browser.What I want is it will resize the image with given height but width should be 100% throughout the browser.
I have created a fiddle as demo so that you can see what's going on.
<div class="resize_image">
<img src="http://www.mrwallpaper.com/wallpapers/sunset-scenery.jpg">
</div>
Full Screen http://jsfiddle.net/squidraj/sbnvwped/embedded/result/
Demo : http://jsfiddle.net/squidraj/sbnvwped/
You can resize it by setting the img tag to 100% width and height and puting it in a container div and resizing that. Demo
<div id="resize">
<img src="http://coolvectors.com/images/vect/2009/07/500x500.jpg" width="100%" height="100%"></div>
#resize{
width:250px;
height:250px;
}
#resize:hover {
width:500px;
height:500px;}
The following code resizes the image proportionally to the width of the page (or more correctly, the container element), but if the height of the image then becomes more than 485px then the width with will be proportional to that. To chop the image, put another div around it with the right width and height, and set overflow to hidden, and remove the max-height from the image itself.
.resize_image img {
display: block;
height: auto;
max-height: 485px;
max-width: 1440px;
width: 100%;
}
Hope this helps.
Try this:
img.resize{
width:540px; /* you can use % */
height: auto;
}
Is there a way how to auto resize the height of an image using CSS?
I have a menu in left side of the website. Image size is 216 x 504.
The width is okay but the height of the image will be auto resized depends on the monitor screen resolution.
Here's my HTML:
<div class="menu-bg">
<img src="image/bg_menu.png" alt="" />
</div>
Here's my css:
.menu-bg
{
position:absolute;
top:130px;
left:0px;
height: auto;
}
The height: auto; is not working. I already tried to google but the result is always the height:auto which is not working.
I'm using Mozilla Firefox as a browser.
Any comments are appreciated.
Thank you
.menu-bg img{
height:auto;
}
Use this css and try
What you are doing is giving an auto height to the container not to the image.
try this jquery
$(document).ready(function() {
var height = $(window).height();
$('.menu-bg').css('height',height);
});
For an element with position: absolute you have to define at least a width or height, in px or %, but a percentage value only if the parent element has a definition for that parameter - auto width will always be 100%, but auto for height without a height setting for the parent element won't work.
You can use media queries to control the height of the image according to resolution. You would go about using the max-height property.
Try this:
.menu-bg {
height:100%; /* remove this if it doesn't work at first */
position:absolute;
top:130px;
left:0px;
}
.menu-bg img {
height:auto;
}
did you try this:
.menu-bg{
position:absolute;
top:130px;
left:0px;
height: auto;
border:2px solid red;
width:216px;
max-height:504px;
height:80%;
}
.menu-bg img{
width:100%;
height:100%;
}
the "height:80%" can be adjusted to your needs...;