I want to use css to make an image keep its aspect ratio (16:9) and be responsive at the same time.
This image will always be in the center of the screen. Check the schema to help you.
I found this post and I tried Chris's solution and Isaac's solution. But I cannot bring the image to the center. I tried using Bootstrap like so.
<div class="col-md-4">.col-md-4</div>
<div class="wrapper col-md-4">
<div class="main">
This is your div with the specified aspect ratio.
</div>
</div>
<div class="col-md-4">.col-md-4</div>
or
<body>
<div class="col-md-4" id="wrap1">.col-md-4</div>
<div class="col-md-4" id="aspectRatio">Aspect Ratio?</div>
<div class="col-md-4" id="wrap2">.col-md-4</div>
</body>
but all the divs appear the one underneath the other.
Any ideas on how to bring the div in the center, by using Bootstrap or not?
Thanks
I always put my img in a div and center the div with:
margin:0 auto;
And for responsive image define width and make the height is auto.
Hope it helps.
This will center your element on the page.
.element {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
I believe you would have to define a min-width or max-width for your image at 100% of a container that is at the aspect ratio that you want for the second part of your question. Also, if you need to dynamically set the aspect ratio there is always JS. Qjuery has functions you can use I think so that will not hard if you are already using it inside of your project.
EDIT: to center the image in your second header I would suggest having a structure such as:
-second header
---------wrap
-----------------image
have the image as 100% size of the wrap.
have the wrap relative to the second header with a width and height of 100% relative to it.
I hope this helps :)
Related
I'm looking to create backgrounds (images or color) that stretch full with in the browser with the Skeleton CSS Grid? http://getskeleton.com - if you download Skeleton, you will see that the Container is a 12-column fluid grid with a max width of 960px. So if you want to create a header div and assign a class to it to change that background image, it will stay within the 960 container. It will not go full width of the browser. Take the header outside of the Container to go beyond 960 & you will break the grid. I would like for the content to stay within the 960 grid but the background is stretched to the edge of the browser - Any ideas?
There are several ways to do this, and without knowing your restrictions, I will suggest: Creating an extra element outside of the container class, which you can style accordingly. Rather than use a single full page container, you could use a container for each section of the site, header>container | section>container | footer>container etc...
CSS
.header {
width: 100vw;
height: 25vh;
background-color: blue; }
HTML
<div class="header">
<div class="container">
<div class="row">
<div class="twelve columns"></div>
</div>
</div>
</div>
This is the method used in the Skeleton Demo.
Take a look at the Skeleton Demo source code, to see how this method is implemented.
Using an absolute positioned element you can sort of jam a background into another element. Since the master container has position: relative you'll have to center it using left: 50%; and transform. top: 0 will make it ignore the parent's padding but if you don't want the background to extend into the padding you'll have to add it to the element to match its parent container. width: 100vw will make it full width since vw units are relative to the viewport.
position: absolute;
width: 100vw;
left: 50%;
top: 0;
transform: translateX(-50%);
background: red;
height: 100%;
Anyone who has used twitter bootstrap knows that an image can be made responsive using the img-responsive class in the html img tag. However, these images take up 100% of the width of the division.
How can I make the image responsive while still keeping its original width?
You can put the image in a wrapper and give the wrapper the width you want the image to have.
HTML
<div class="imgwrapper">
<img src="img.jpg" class="img-responsive">
</div>
CSS
.imgwrapper {
width: 80%;
}
The above should in theory make the imgwrapper 80% of the width of the parent-element, and the img-responsive-class on the image will fill up the whole wrapper.
If this doesn't answer your question, could you explain a bit better what you mean with keep original width, but make it responsive? Since making it responsive will resize the image, which means it will not have the original width.
You should have a wrapper around the image defining the actual size of the parent that could be used to place that image. It will be related to the parent div. Then apply .img-responsive to the image. This will cause the image to have the same width as the wrapper.
HTML
<div class="wrapper">
<img src="your-image.jpg" class="img-responsive" />
</div>
CSS
.wrapper {
width: 50%;
}
If you want to keep the original size (it will be resized to have small size but never higher), you should also add a max-width which will have to correspond to the image's original size. This will overwrite the original value of 100%
.wrapper img {
max-width: 280px;
}
The .img-responsive class applies max-width: 100%; and height: auto; to the image, so if you want to keep its original width explicitly you have to set width of image using width attribute of img tag.
I'm facing a rather challenging html/css problem. I'm trying to build an image gallery with thumbnails below. The design needs to be fluid and able to scale down for mobile.
The requirements,
Container needs to maintain 4:3 aspect ratio regardless of image
size within
Container max-width 665px and the min-width:300px
Image within needs to align center / middle
When the browser scales down the container to the point in which it meets one of the image sizes, the image must scale down
with the container.
I've successfully been able to get the container to scale correctly with the code below, but the image doesn't maintain vertical middle nor does it scale with the container. The container scales behind the image as if the image is just floating on top of the container.
JS Fiddle Example
http://jsfiddle.net/2kmtmzxv/18/
Example code
<div id="image-container">
<div id="dummy"></div>
<div id="image">
<div>
<img src="http://www.gannett-cdn.com/-mm-/d3038439ef7e9ad854298da49122ea72ad452f6a/c=186-0-2724-1908&r=x513&c=680x510/local/-/media/USATODAY/USATODAY/2014/08/22/1408738143000-2015-Chevrolet-CorvetteZ06-026.jpg"/>
</div>
</div>
</div>
css
#image-container {display:inline-block;position:relative;width:100%;max-width:665px;min-width:300px}
#dummy {padding-top:75%/* 4:3 aspect ratio */}
#image {position:absolute;top:0;bottom:0;left:0;right:0;background-color:grey}
#image div img{display:block;margin:auto;vertical-align:middle;width:100%;max-width:400px}
UPDATE
I was able to get the image to scale within by adding width:100% to the image. I still can't get it to vertically align middle though.
To center the image, on the img css add
positon:absolute; top:0; bottom:0; left:0; right:0;
This will absolutely position the image relative to its closest non static element (which in this case is #image)
Here is a fiddle: http://jsfiddle.net/dzgvh453/
You have this options
Background image instead of actual image
Simply have a thumbnail that at-least have a min-height and width. then use the image as background, center, and no-repeat.
Scalable image width:
Simply have a thumbnail that at-least have a min-height and width, then put your inside it with 100% width.
Your second option is the easiest way to do it. I simply added width:100% to #image div img
http://jsfiddle.net/3e90xxge/#image div img { width: 100%}
I was searching for solution for hours but can't find it.
I have div with fixed height and 50% width. And I want to display a picture inside it with 100% width and default aspect ratio but vertically centered
Thanks ;)
<div class="wrap">
<img class="img">
</div>
Add overflow:hidden to your div and then adjust the margin of the image into the negative. How much depends on the div's fixed height and the image height.
EDIT
Consider using CSS and background images if you don't know the image heights. Instead of outputting an image tag, output an inline style on the div.
<div class="css-is-good" style="background-image: url(image.jpg);"></div>
CSS
div.css-is-good {
background-position: 50% 50%;
/* if you need to stretch it, use background-size: */
background-size: 100% auto;
}
Updated fiddle: http://jsfiddle.net/willthemoor/Cu3G5/
So I have a couple container holding that have an image and I'm trying to add padding to the container only if the images is less than the width of the container.
I know this will be a simple javascript solution but is there a way to do this with css?
Example html:
<div class="image-container">
<img scr="my/path/to/image"/>
</div>
<div class="image-container">
<img scr="my/path/to/image2"/>
</div>
css: I dunno :)
Take a look at this image to get a better idea of what I'm trying to do: http://grab.by/r1sS
It is not possible to add padding based on the image size using CSS.
Although, From the link you provided it looks like you are trying to center the image. You can achieve this by setting text-align to center on the container which will center the child elements ie. the image.
.image-container {
text-align: center;
}
In regards to the original query, it is not possible to add padding based on the image size using CSS.
I'm not aware of any way to apply the exact conditional you're asking for in pure CSS since CSS has no conditionals.
But, based on your screen shot it seems like you don't need padding. Why not just center the image over a colored background. Won't that accomplish the same thing?
When the image is full width, it will cover the entire background and fill the container. When it's not full width, it will be centered in the container.
To center the image in the container and apply a background color:
.image-container {
text-align: center;
background-color: #777;
}