When i have a div that is for example 300*300px and a image that is 1280*560px.
Can i show a specific part of the image in my div while it stays responsive while only using html/css?
the div is always taking up 33% of the page width
my code looks like this:
html
<div class="crop">
<img src="path/to/img">
</div>
css
position: relative;
overflow: hidden;
min-height: 300px;
Yes, quite easy, in fact:
.image {
display: block;
position: relative;
overflow: hidden;
width: 300px;
height: 300px;
}
.image img {
position: relative;
left: -100px;
top: -100px;
}
<div class="image">
<img src="http://img05.deviantart.net/c135/i/2011/134/7/0/bridge_by_kzonedd-d3gcetc.jpg" alt="photo of old wooden bridge" />
</div>
Of course, the minus 100px just to show you how to position. Play around with the values and all will become clear.
HTH. Good luck and have fun.
Using a background-image might help you in this situation, you can adjust the position of it using background-position:
.crop{
position: relative;
overflow: hidden;
min-height: 300px;
width: 300px;
background-image: url(https://cdn.pixabay.com/photo/2015/07/06/13/58/arlberg-pass-833326_960_720.jpg);
background-size: contain;
}
<div class="crop">
</div>
yes you can do that with flex
this is the code, explaination below
div{
width:300px;
height:300px;
overflow:hidden;
position:relative;
left:50%;
transform:translateX(-50%);
display:flex;
justify-content:center;
align-items:center;
}
div img{
flex:0;
width:auto;
min-height:100%;}
<div>
<img src ="http://www.cooperindustries.com/content/dam/public/safety/notification/products/Mass%20Notification%20Systems/Spotlight/MNS_WideArea_Spotlight3.jpg">
</div>
on justify-content you can put flex-start, flex-end, and center to fit which part you want to input horizontally
on align-items you can put the same thing as justify content to adjust vertically.
this image is landscape so i set min-height 100% and width auto, you can do the other side when you got a portrait image. if the image is square, width 100% will do just fine
Related
for clarity, see codepen: http://codepen.io/anon/pen/QyaLPb
I want to create an image with an overlay. The overlay should be the same size as the image, however because of the width: 100% and height: auto for both the .imagecontainer and img, they don't have the exact same height. The overlay now has a few pixels more height than the img. You can see the .imagecontainer has more height than the img inside (red background showing at the bottom). I need the imagecontainer and img to be responsive, so setting a fixed height is not really an option. How do I solve this?
HTML:
<div class="wrapper">
<div class="imagecontainer">
<img src="http://www.kleinewolf.nl/uploads/fancybox/8f5b7a59-32b7-4582-868b- e2ff1f3e41a2/2835832130.jpg">
<div class="overlay">
</div>
</div>
</div>
CSS:
.wrapper{
width: 400px;
padding: 40px;
}
.imagecontainer {
width: 100%;
height: auto;
overflow: hidden;
background: red;
position: relative;
}
.imagecontainer img {
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
background:rgba(0,0,0,0.8);
display:none;
}
.imagecontainer:hover .overlay {
display:block;
}
If you're speaking of the red border below the image.
Add to your .imagecontainer img: display: block. That should solve the problem...
http://codepen.io/anon/pen/QyaWNE
Added line-height:0; to your container div. Images contained by parent divs usually tend to take margins from other elements, and line-height and font-size are usually a problem. Good luck!
Lets say I have a div of heigh 400px and width 400px.
<div style="width:400px; height:400px; background:#CCC;" align="center">
<img src="/static/{{media_info.media_file}}" />
</div>
Now if I have a image of height 350 and width 200 px I want it to be adjusted in this div. I mean it adjust inside the div being child to the div. It should not fit to the div neither stretch. Just fit in the center.
Like div should be taken as 100% and image should be in its ratio.
Remaining 50 px in height and 200 px in width should be left. like buttom and top leaving 25 25 px and left and right leaving 100 100 px.
Also if the image is of say width 800px and height 700 px same way the div height and width should be considered as 100 percent and the image should lie in the middle without any stretch
I am not a front end developer :(
So you want the image to be centered inside the div, in its original size, and any overflow simply cut of when the image is larger than the div in any dimension?
Well you could just set it as a centered background-image, instead of using in actual img element.
If that’s not an option, position it absolutely – -50% from either “side” (top, left, right and bottom), and use margin:auto to center it:
div { position:relative; width:400px; height:400px; margin:10px; background:#ccc;
overflow:hidden; }
div img { position:absolute; top:-50%; left:-50%; right:-50%;
bottom:-50%; margin:auto; }
<div id="div1"><img src="http://placehold.it/350x250/ff9999/000000"></div>
<div id="div2"><img src="http://placehold.it/800x700/ff9999/000000"></div>
You can achieve this using transform property of css.
Here is the fiddle
div {
position: relative;
}
img {
display: block;
margin:0 auto;
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Note, I cleaned up the inline styles, just to make it clear.
http://jsfiddle.net/s4ja2q1z/4/
div {
width: 400px;
height: 400px;
background: lime;
text-align: center;
position: relative;
}
img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
position: absolute;
margin: auto;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
EDIT: Added fixes if the image is taller than the container.
Try putting max-width and max-height on the image:
<img style="max-width: 100%;max-height: 100%;" src="/static/{{media_info.media_file}}" />
This will keep the image dimensions limited to a maximum width and height of the parent container (aka 400px in this case) and it will scale down if you ever change your parent div's dimensions without changing any ratios that would cause stretching.
You can do it this way too by using the table-cell property.
http://codepen.io/Edrees21/pen/XJoEmp
<div class="container">
<img src="http://placehold.it/350x200/aEEAEE" />
</div>
.container {
width: 400px;
height: 400px;
text-align: center;
background-color: #cccccc;
vertical-align: middle;
display: table-cell;
}
I would set the image as a background of your div and then change the size of it using background-size: contain.
This will make your image not be distorted, but still fill the entire div.
<div style="width:400px; height:400px; background-image:url("image.jpeg"); background-repeat:no-repeat; background-size: contain; background-position: center;">
</div>
div {
text-align: center;
}
img {
max-width: 400px;
max-height: 400px;
vertical-align: middle;
}
I have a <a> tag with an <img> inside of it that I want to be vertically and horizontally on the screen, but also have a max-height and max-width so that if sits nicely on the screen with whitespace around it. It needs to work for both portrait and landscape images on any screen size and cannot crop the image at all. I can't get the image's max-height to work, however.
The <a> also has some text that is positioned under the left side of the image, so I'm trying to make the size of the <a> match the size of the <img> to make the positioning of this text right.
HTML:
<a href="#">
<img src="image.jpg" alt="it's a picture">
<p>Image Title</p>
</a>
CSS:
a {
display: block;
position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
max-width: 60%;
max-height: 60%;
}
img {
max-width: 100%;
max-height: 100%;
}
p {
position: relative;
top: 10px;
}
Setting percentage max-width when no width specified is almost the same as setting a regular percentage width, so i changed the link size to simple width/height 60%, hope thats all right. Now, the easiest way to center things is Flexbox. You can learn more about it here:
http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
I had to add an extra div to wrap both the image and subtitle, so the text can be aligned to the bottom left of the image.
<a>
<div>
<img src="image.jpg"/>
<span>asd</span>
</div>
</a>
And here comes the flexbox CSS:
body {
display: flex;
align-items: center;
justify-content: center;
}
a {
display: block;
width: 60%;
height: 60%;
border:2px solid red;
display: flex;
align-items: center;
justify-content: center;
}
a span {
display:block;
}
a div {
max-width:100%;
max-height:100%;
display:block;
margin:0 auto;
}
a img {
max-width:100%;
max-height:100%;
display:block;
}
And this is how it looks like:
http://jsfiddle.net/9xgyu6a4/
Works with portrait images too:
http://jsfiddle.net/9xgyu6a4/1/
This code from CSS-Tricks will allow you to center the image almost directly in the middle of the screen:
<a href="#">
<img src="/pathTo/image.jpg" alt="it's a picture">
<span class="title">The Image's Title</span>
</a>
a {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.title {
position:fixed;
width:327px;
text-align:center;
}
The trick is to use fixed positioning on the <a> element, such that both the top and left CSS properties are taken into account. The image won't resize as the viewport becomes smaller, and will stay centered in landscape/portrait layouts. Assuming that the height and width of the image is known (in this case, the image is 327px by 327px - I'm not sure exactly what is meant by "variable size image"), .title has an equal width to the image.
Here is a JSFiddle to show what I mean: http://jsfiddle.net/p4toy2qq/.
The Code is here:
HTML
<div class="container">
<img src="image-of-any-size.jpg" alt="alt" />
</div>
CSS
.container { width: 100px; height: 100px; overflow: hidden; border: black solid 1px; margin: 10px;}
.container img { width: 100%; }
I basically want different sized images to fill out the divs, without the aspect ratio getting messed up. The overflow should be hidden, so the parts outside get 'cropped' off.
Any ideas?
If you have the option to set them as background images you can use:
.container{
background: url('something.jpg');
background-size:cover;
background-position:center center;
}
Note that some older browsers don't support background-size: http://caniuse.com/#search=background-size
there's a method to do this.
.img-container{
position:relative;
width:100px;
height:100px;
display:block;
overflow:hidden;
text-align:center;
}
horizontal img
.img-container > img{
position:absolute;
top:0;
height:100%;
}
vertical img
.img-container > img{
position:absolute;
top:0;
width:100%;
}
demo
If you want to cover the height of the images inside the container, use background-image: auto 100% style instead of img tag and apply the image to the .container element directly.
Working Fiddle
Note: This solution is assuming that all your images have more than 100px of height as you have shown in the fiddle.
Update:
If you want to just cover the image completely inside the container then you can use background-image: cover
Working Fiddle
You could use the new object-fit property (currently webkit only)
1) Set object-fit: cover; on the image to ensure that the aspect ratio is kept, and
2) Set height: 100px to fill the box if the image is < 100px high.
FIDDLE
.container {
width: 100px;
height: 100px;
overflow: hidden;
border: black solid 1px;
margin: 10px;
}
.container img {
width: 100%;
object-fit: cover;
height: 100px;
}
<div class="container">
<img src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" alt="alt" />
</div>
<div class="container">
<img src="http://chennaionline.com/images/gallery/2013/June/20110623010938/Singam2_Suriya_Stills_Photos_Images_10.jpg" alt="alt" />
</div>
<div class="container">
<img src="http://www.moviehdwallpapers.com/wp-content/uploads/2014/10/happy_diwali__sms_images_.jpg" alt="alt" />
</div>
You can read more about this new property in this webplatform article.
From the above article - regarding the 'cover' value:
The whole image is scaled down or expanded till it fills the box
completely, the aspect ratio is maintained. This normally results in
only part of the image being visible.
Also, here is a fiddle from the above article which demonstrates all the values of the object-fit property.
I have an image that is bigger than its container div. When the browser/screen resizes, it should make the image bigger or smaller but always keeping the center of the image centered inside the div. One example of this is the following website: http://www.qdoba.com/ . They have their images centered as you resize the screen making it very well responsive. What I have at the moment only makes it resize horizontally but not vertically. This is what I have so far:
.swiper-container {
width: 100%;
height: 300px;
color: #fff;
text-align: center;
overflow: hidden;
}
.slide{
width:100%;
}
.slide img{
width:100%;
}
</style>
<div class="swiper-container">
<div class="slide">
<img src='http://www.envision-creative.com/wp-content/uploads/Tiagos01.jpg' />
<div class="title">Slide 1</div>
</div>
</div>
Its pretty simple. [Jump to the end of the answer for the updated Fiddle]
HTML
<div class="slide">
<span class="Centerer"></span><div class="Centered">
<img src='http://imageshack.us/a/img19/3207/15p0213.jpg' />
<div class="title">Slide 1</div>
</div>
</div>
CSS
*
{
margin: 0;
padding:0;
}
html, body
{
height: 100%;
}
.slide
{
text-align: center;
height: 100%;
width: 100%; /*not really needed*/
}
.Centerer
{
height: 100%;
display: inline-block;
vertical-align: middle;
}
.Centered
{
display: inline-block;
vertical-align: middle;
}
/*you don't always want your centered stuff to be 100% width, so its in a different rule*/
.Content
{
width: 100%;
}
.Content img
{
max-width: 30%; /*so you can see the responsive alignment and size*/
}
If you don't set any height to the Slide, it will always have the exact height of its content, so it will look like there is no vertical alignment.
Check out this Working Fiddle
EDIT
I didn't understood you correctly.
Check out this New Fiddle
<div class="slide">
<img src='images/test.jpg' />
<div class="title">Slide 1</div>
</div>
<style>
.slide{
width:100%;
display:table-cell;
vertical-align:middle;
height: 200px; /* you have to make height static */
}
.slide img{
width:100%;
}
</style>
Ok I finally got an answer to my question. Perhaps I was not explaining it correctly but what I initially needed was to make sure the center of my image was vertically centered inside a div. The answer could not be done with just HTML and CSS but javascript needed to be implemented. so here it is CHECK OUT FIDDLE:
<style>
.swiper-container {
width:100%;
}
.slide{
width:100%;
max-height: 200px;
overflow: hidden;
}
.slide img{
width:100%;
}
</style>
<div class="swiper-container">
<div class="slide">
<img src='http://www.envision-creative.com/wp-content/uploads/Tiagos01.jpg' />
<div class="title">Slide 1</div>
</div>
</div>
<script>
$(document).ready(function(){
var imageHeight, wrapperHeight, overlap, container = $('.slide');
function centerImage(){
imageHeight = container.find('img').height();
wrapperHeight = container.height();
overlap = (wrapperHeight - imageHeight)/2;
container.find('img').css('margin-top', overlap);
}
$(window).bind("load resize", centerImage);
});
<script>
I had a very similar problem to you, also for a responsive slider component that I was building.
My requirements:
The slider container must have a 100% width against the viewport and it must have a fixed height.
The images within the slider must stretch to the full width of the slider.
The images must maintain their aspect ratio so they are not distorted.
The images must always be vertically aligned to the middle of the slider container to create a "center crop" effect for any of the image which doesn't fit within the restricted height of the slider container.
I managed to achieve this without the use of any javascript based on principles from the following smashing magazine post: http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/2
Here is a generic form of my html, without any noise, to illustrate how to solve this problem:
<div class="container">
<img src="http://lorempixel.com/640/480/animals/1" />
</div>
And here is the minimal css required:
.container {
width: 100%;
height: 200px;
overflow: hidden;
position: relative;
}
.container img {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
margin: auto;
width: 100%;
}
You can see a fiddle of this in action here: http://jsfiddle.net/8kjfasbt/
It's a very basic implementation, focusing on the problem, but you could easily take this and drop it into a slider implementation and add fancy media queries for some extra effect.
You could of course modify the CSS to give the image other dimensions, pixel or percentage, it would still center. :)