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%;
}
Related
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;
}
I'm trying to make a site similar to this: http://www.awerest.com/demo/myway/light/
A single paged site with a responsive image that takes up the full screen, on any device. That's my issue I can't figure out a way to get a background image to go full screen on any device.
<img src="C:\Users\Jack\Desktop\City-Skyline.jpg" class="img-responsive" alt="Responsive image">
I came across this but no luck, if some one can point me into the right direction on how to do this it would be very appertained.
The crucial part here is to set up the height of your content as 100% relative to the viewport (html element). By applying the background image to a div and not just using an img you also have a lot more flexibility in how its displayed, background-position keeps it always centered, background-size:cover keeps it scaled.
Demo Fiddle
HTML
<div></div>
<div>More Content</div>
CSS
html, body {
height:100%;
width:100%;
position:relative;
margin:0;
padding:0;
}
div:first-of-type {
height:100%;
width:100%;
background-image:url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSbcnkIVXLz23PALu8JD-cTGe8KbXKC1JV0gBM_x1lx3JyaNqE7);
background-size:cover;
background-position:center center;
}
div:last-of-type {
background:green;
position:relative;
color:white;
height:100%;
}
I want to make so that when the user visits my site to see only one image (100% width) and when he scrolls down to be able to view the rest of the site.
I've seen this and tried it...it works: Full page background image with vertical scrolling
But i have two main concerns:
By this method i must use position: absolute for every section below the image (I will have at least different 4-5 sections with content). Is that the right thing to do ?
This method does not seem to be responsive, is there a way to make it ?
You don't have to use position at all. Once you set a div's size with the screen size all the rest of your content will be below.
Here you go: example
The image div will contain your image, and you set it to width: 100% and height: 100%
then, just add your content below this div.
HTML:
<div class='image'>
<img src="image.jpg" />
</div>
<div class='content'>Content</div>
CSS:
html, body{
margin: 0;
height: 100%;
}
.image{
width:100%;
height:100%;
background: green;
}
.image img{
width:100%;
height:100%;
}
.content {
width:100%; height: 100px;
}
You also need to add
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
to support all screen sizes.
Try this: http://jsfiddle.net/stddC/
In this way the image will be 100% height and width and won't mess with the content.
I do not display it as a thumbnail, but can CSS help compress the image of size 1000x1000 into an image of size 500x500?
My CSS for the image looks like this:
.images {
background:url("image.png") no-repeat scroll; // this is a 1000x1000 sized image
}
How do I overwrite this? I do not want to have to generate another image of size 500x500.
You can use CSS3 background-size:
.images{
background:url("image.png") no-repeat scroll;
background-size:500px 500px;
}
But that will resize the image AFTER it has been dowloaded. And the best way is resizing the image with PHP (or similar) BEFORE the user downoads it.
If you can't resize it server-side and you want it to be cross-browser, you could also use
HTML:
<div class="images">
<img class="bg" src="image.png" alt="My image" />
Content
</div>
CSS:
.images{
position:relative;
}
.images>.bg{
height:500px;
width:500px;
position:absolute;
top:0;
left:0;
z-index:-1;
}
(You can set both height and width but only one of them is necessary).
background-size: 500px 500px;
But it's not supported in ie7 and ie8.
If you would display it in an image tag you can set the width and height to the image tag. You can fake a background by absolute positioning the image.
<img width="500" src="..." />
If you are already using the image somewhere else it could be a good idea to reuse and resize it.
If i have an image grid in css:
<div class="blockWall">
<div class="blockWallCell">
<a href="#">
<img src="img.gif" />
</a>
</div>
...blockWallCell repeats
<div style="clear:both;"></div>
</div>
with css:
.blockWall
{
width:800px;
}
.blockWallCell
{
float: left;
height: 100px;
overflow: hidden;
width: 100px;
padding:4px;
}
.blockWallCell img
{
border:none;
max-width: 100px;/* or max-height:100px;*/
overflow: hidden;
vertical-align: middle;
}
is there a way via css to make the tag fit the image wholly in the 100x100 .blockWallCell without setting the style of the to max-width:100px; or max-height:100px, i.e. if I don't know if it is a landscape or portrait image. I would like to use the overflow:hidden of the div to chop of the remainder of the non-scaled image.
What you've got right now should do the trick. You'll get a bunch of 100x100 divs with images that will fill as much of the 100x100 space as they can, with any overflowed parts hidden.
Do you want the .blockWallCell to be variable size, maxing out at 100x100? Or do you want the image to stretch out to fill the cell if it's smaller than 100x100 in either dimension?