I'm looking to place an image inside the .hero-unit that takes up 100% of the unit. This means that it would scale according to the overal window size.
Right now i have the in there, but it looks like there's 100px padding to the right of the image. If i adjust the image max-width: 100% to something larger, it does not scale accordingly.
<div class="hero-unit">
<img src="images/landscape.png">
</div>
Does anyone have an idea of how to remove the padding on the right, but also preserve the auto-resizing capabilities of bootstrap?
As mentioned use the following selector :
.hero-unit img {
width: 100%; height: auto;
}
Working sample : http://jsfiddle.net/basarat/MgcDU/2145/
width: 100%; height: auto; should work, as long as the container div's resizing according to window width is correct.
You can do the following :
Here's one jsfiddle http://jsfiddle.net/shail/5YD2J/1/
<div class="container">
<div class="hero-unit">
<img src="http://placehold.it/1500x400">
</div>
</div>
.hero-unit {
padding:6px;
}
You need to have your image in good resolution , scaling an image with small width and height will lead to bad stretched dimensions and wont look good .
Related
I'm working on a ePub containing a lot of images. Some are extra wide, some are extra long.
All my images are inside a div with a 100% width.
I want my images to use 100% of the div witdh unless that would make the height bigger than 100% of the page height.
Currently, my code looks like this:
<div style="width: 100%; max-height: 100%;">
<img style="max-height: 100%; max-width: 100%; display: block;" src="image.jpg" />
</div>
It works when the image is big and takes a full page but when, on the same page, I have one element before and one element after the image container, the container and the image inside get "crushed" and appears super small.
Example of two crushed images
(I put a 1px border on the first image container to check if it was taking 100% of the width.)
Is there a way to fix this?
Thank you a lot for reading.
//you can do it by making a class with max-width and max-height to 100% then give this class to all of your images.
<style>
.imgclass{
max-width: 100%;
max-height: 100%;
display: block; /* remove extra space below image */
}
</style>
<div>
<img src="man-profile.png" class="imgclass">
<img src="man-profile.png" class="imgclass">
</div>
I want to make an image good for a responsive layout. I am using an large .svg image at the moment which resizes to any and still looks sharp.
However, when I put the image in a div it is sometime too big or small. I just want it to fill the screen properly.
So far I have coded:
img{display:block;}
but am sure theres more to it...Anyone?
To make your image change size dynamically (and stay within your div), give it a max width and set the height to auto.
.imgcontain {
max-width: 50%;
}
img {
max-width: 100%;
height: auto;
}
<div class=imgcontain>
<img src="https://images.unsplash.com/photo-1542044896530-05d85be9b11a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" />
</div>
so I have an image tag on my page that is set to 300px height. When a bigger image is used for it, the image is stretched so it fits and it gets really ugly. Is there a way to just get a part of the image instead, preferably the top 300pxs of it?
Hope I made myself clear, I'm new to this. Thank you!
I believe
overflow:hidden;
is what you're looking for. You put that property on a div that surrounds the image, not the image itself. Here's a good resource: http://css-tricks.com/almanac/properties/o/overflow/
Here's a code sample:
<html>
<head>
<style>
.overflow{
height:100px;
width:200px;
overflow:hidden;
}
img{
height: 200px;
}
</style>
</head>
<body>
<div class="overflow">
<img src="http://funmozar.com/wp-content/uploads/2014/06/white-cat.jpg">
</div>
</body>
</html>
You could also want to consider using the max-height and max-width properties. Make sure not to set both height AND width on the image or it will still stretch it to match those parameters.
probably the best solution in order to avoid image stretching is to use a div with fixed size (width and height), background-image and use background-size propriety.
example:
html:
<div id="yourDiv"></div>
css:
#yourDiv {
width: 200px;
height: 200px;
background-image: url('yourimage.jpg');
background-size: cover;
}
Please have a look here for other information about background-size: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
A possibility is to use the object-fit CSS property on the image. For instance, the value contain will scale down the image so that its original ratio is maintained; while the value cover will crop parts of the image. You can then use the object-position property to properly place the scaled down or the croped image.
For more information on these CSS properties and their differents values:
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
You can wrap the image in an element, set fixed dimensions for the container and no dimension settings for the image but overflow: hidden on the image. Here’s an example of using small dimensions:
An image:<br>
<img src="http://www.lorempixel.com/100/100" alt="foo"><br>
The same image with just the upper half taken:<br>
<div style="width: 100px; height: 50px; overflow: hidden"><img
src="http://www.lorempixel.com/100/100" alt="foo"></div>
I would like my images to be displayed wider than my wrapper/parent width but still be responsive with the browser window size. Currently, my wrapper width is 500px.
I'm able to achieve wider images by:
<p style="margin-left: -25%; margin-right: -25%;">
<img alt="My wide image" style="width: 100%;" src="wide_image.jpg"/>
</p>
The above gives an image width wider than parent/wrapper width, but, the image doesn't scale with the browser window; instead, the wrapper/parent width scales correctly, and a horizontal scroll bar appears in the browser to navigate the image from left to right.
Thank you in advance. :-)
Edit: added missing double quote as Elliott Post pointed out.
Edit2: the answer shown here scales the image with respect to the browser window, however it obscures text after the image and is the full width of the page rather than 25% extra on each side: Is there are way to make a child DIV's width wider than the parent DIV using CSS?
Edit3: Here is a modified jsbin from Roko C. Buljan: http://jsbin.com/sumoqigo/1/edit
A quick fix for older browsers is to simply add overflow-x:hidden; to your body element.
Talking about responsiveness and modern browsers, if you don't want to have parts of your images hidden by the body overflow...
you could use media queries to achieve the desired:
jsBin demo
First add a class to your image:
<img class="wideImage" src="image.jpg" alt="My image"/>
Than the following CSS:
.wideImage{
width:150%;
margin-left:-25%;
}
#media(max-width: 750px){ /* 25%of500px=125; 125*2=250; tot=750 */
.wideImage{
width: 100vw; /* vw is the CSS3 unit for Viewport Width*/
margin-left: calc( (-100vw + 500px) / 2 );
}
}
#media(max-width: 500px){
.wideImage{
width: 500px;
margin-left:0;
}
}
Is there a way to resize images retaining their proportions with CSS?
The container has a fixed width and height
<div class="container">
<img class="theimage" src="something" />
</div>
and the reason I'm asking is because the layout can change (from list to icons via a class) and the images need to be resized (about 40% less) in proportion.
I know how to do it with JavaScript and also how to resize via CSS, but don't really believe it can be done in proportion with CSS, unless there is some clever way.
.theimage{
width:100%;
height:auto;
}
or
.theimage{
width:auto;
height:100%;
}
Depending on how you wanna give the scale preference... :) :)
Thats all.
To save the Image ratio while scaling you can use object-fit CSS3 propperty.
Useful article: Control image aspect ratios with CSS3
img {
width: 100%; /* or any custom size */
height: 100%;
object-fit: contain;
}