I'm trying to force images that are generated for a splash page to stretch to full size but at the same time have the image be responsive and fluid.
Here is the HTML
<div class="newsImage">
<xen:contentcheck>
<xen:if is="{$news.attach}">
<img src="{xen:link attachments, $news.attach}" alt="{$news.attach.filename}" style="width: 500px; height: 200px;" />
<xen:elseif is="{$news.image}" />
<img src="{$news.image}" alt="{$news.image}" style="width: 500px; height: 200px;" />
<xen:else />
<xen:avatar user="$news" size="m" itemprop="photo" />
</xen:if>
</xen:contentcheck>
<div class='newsTitle'><h2>{xen:helper threadPrefix, $news}{$news.title}</h2></div>
</div>
Here is the CSS
I'm sure the max-width is incorrect in terms of making it responsive but it seems to force the stretching that I want.
.recentNews .newsImage { width:100%; height:auto; }
.recentNews .newsImage img { max-width:100%; height:auto; }
Thanks for the help!
Background size property:
background-size: cover;
background-size: 100% 100%\9; /* IE8 */
Is there a reason why you are setting the width and height with inline styles? It should work if you remove them.
style="width: 500px; height: 200px;"
max-width will work if the image is larger than the div, else you'd want to set the width to 100% so smaller images can stretch to the width of the container.
http://jsfiddle.net/WPxnG/2/
HTML
<div class="recentNews">
<div class="newsImage">
<img src="//lorempixel.com/1500/1500/" alt=""/>
</div>
</div>
CSS
.recentNews .newsImage img {
max-width: 100%;
}
.stretch {
width: 100%;
}
Related
How do I get the height to work, It doesn't affect the images on the Carousel (They change heights, but the width stays the same (obviously)
<div class="item">
<img src="Slideshow2.jpg" alt="Alt Name" style="width:100%, height:100%;">
<div class="carousel-caption">
<h3>Name</h3>
<p>Context</p>
</div>
</div>
img {
width: 100%;
min-width: 100%;
height: 100%;
object-fit: cover;
}
Add this to your CSS, then put it in the <style> tag or link to a css document using a link tag.
Let's suppose I have the following code:
img {
max-widht: 100%;
max-height: 100%;
}
<div width="500" height="500">
<img src="https://placehold.it/250x150">
</div>
This works fine for all images if with width or height higher than 500px.
But with smaller images, the image will not cover the div.
Is there a CSS way to force the image to be a least width: 100% or height: 100% regardless its original size ?
EDIT :
This solution by disinfor worked for me.
img {
width: 100%;
height: 100%;
object-fit: contain;
}
Do this:
img {
width: 100%;
height: auto;
}
The reason smaller images (in your case, smaller than 500px wide) don't fill the whole space, is because max-width means "max width of the actual image." So if you use width: 100% instead, the image will fill the space of its container.
Using height: auto will ensure the image doesn't get stretched/distort vertically.
Proof of concept:
.normal, .land, .port, .fit {
height: 200px;
width: 200px;
}
img {
width: 100%;
height: auto;
}
div.land img,
div.port img {
width: 100%;
height: 100%;
}
div.fit img {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="fit">
<img src="https://placehold.it/500x750">
</div>
<div class="fit">
<img src="https://placehold.it/50x100">
</div>
<div class="normal">
<img src="https://placehold.it/75x10">
</div>
<div class="normal">
<img src="https://placehold.it/10x75">
</div>
<div class="land">
<img src="https://placehold.it/75x10">
</div>
<div class="port">
<img src="https://placehold.it/10x75">
</div>
img {
max-width: 100%;
object-fit: cover;
}
<div width="500" height="500">
<img src="https://placehold.it/250/150">
</div>
I think that you answered to your own question!
You have a Div! => width:500px and height: 500px!
when an image is larger than this size, Max-width and max-height can work correctly!
but when your image is smaller, max-width can't help you, because image width is smaller than 500px!
for example you have an Image => width:300px. max-width:100% is equal to 300px!
then you can change your code like this:
<div>
<img src="#" alt="Alternate Text" style="width:500px;height:500px;" />
</div>
but if you want a responsive Image:
<div style="width:500px;height:500px;">
<img src="#" alt="Alternate Text" style="width:500px;height:auto;" />
</div>
You can use background-size CSS rule if you put your image to background:
css
.block {
background: url(my_picture.png) no-repeat 50% 50%;
background-size: cover;
}
html
<div width="500" height="500" class="block"></div>
I have an image (508 x 564) that I want to fit fully into its parent container.
Even with width: 100% or max-width: 100%, this is the biggest the image stretches to. I'm doing a split screen style, where I'm only showing the left side of the split screen (thus, you'll see width: 50% in the CSS.)
HTML:
<div class="mainContainer">
<div class="imageContainer">
<img class="image" src="path/to/image"></img>
</div>
<div class="textContainer">
<h1>Some text here</h1>
</div>
</div>
CSS:
.imageContainer {
width: 50%;
}
.image {
width: 100%;
height: 100%;
background-size: cover;
}
The image should ideally scale up to fit the parent container if I specify width: 100% right? I've also tried max-width: 100% with the same results.
NOTE: I FORGOT TO MENTION THAT I'M WORKING WITH A .SVG FILE. This is probably why it's not behaving the way I expect it to like JPG/PNG files!!!!
-EDIT FOR SVG-
You can display svg images by either using <object>,<embed>,<iframe> or <svg> as follows:
Using the <object> tag:
<object type="image/svg+xml" data="image.svg">
Update your browser to support support SVG <-- displayed if svg is not supported
</object>
Using the <embed> tag:
<embed type="image/svg+xml" src="image.svg" />
Using the <iframe> tag:
<iframe src="image.svg"></iframe>
Using the <svg> tag:
<svg xmlns="http://www.w3.org/2000/svg"></svg>
FOR THE PREVIOUS UNEDITED QUESTION:
-For JPEG/PNG-
Your html and css markup is all messed up. You need to:
Close the div tag
Close the img tag correctly
Close your css properties with a semi-colon
Like this:
HTML:
<div class="mainContainer">
<div class="imageContainer">
<img class="image" src="//i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" />
</div>
<div class="textContainer">
<h1>Some text here</h1>
</div>
</div>
CSS:
.imageContainer {
width: 50%;
}
.image {
width: 100%;
height: 100%;
background-size: cover; <!-- remove this. Only applicable to background images and not inline images -->
}
jsFiddle: https://jsfiddle.net/e0d8my79/192/ <-- 50% width
jsFiddle: https://jsfiddle.net/e0d8my79/194/ <-- 100% width
If you want to use background-size you need to apply the image as the background, not an element.
.imageContainer {
width: 50%;
height: 100px;
background: url('http://placehold.it/50x50') no-repeat center center;
background-size: cover;
}
.image {
width: 100%;
height: 100%;
}
<div class="mainContainer">
<div class="imageContainer">
</div>
<div class="textContainer">
<h1>Some text here</h1>
</div>
</div>
use only max-width:100% for the image selector.
There are a couple issues. You're missing semicolons on the CSS properties, but also, you cannot use background-size on an image that is specified inline.
If you want that image to fill the entire container, you could specify it as a background-image instead and then your background-size property would work. See below.
.image {
background-image: url('path/to/image');
background-size: cover;
}
If you want to scale it up to the maximum, please try the below code.
<img src="your-img" style="max-height:100px;max-width:100px; width:auto; height: auto; position:absolute; margin: auto;">
I have an img in a container. I have given the image width: 100% and now I want to set a max-height for the image without resizing it.
I tried adding max-height: 120px; overflow: hidden; but it is not working.
Why can't I crop the image to be 100% width and 120px height from top?
Demo:
https://jsfiddle.net/DTcHh/14727/
HTML:
<div class="row">
<div class="col-xs-6">
<img src="http://www.tuning-links.com/uploads/image/2009/June/VW%20Scirocco%20Remis/VW_Scirocco_Remis_4.jpg" alt="">
</div>
<div class="col-xs-6">
<img src="http://www.tuning-links.com/uploads/image/2009/June/VW%20Scirocco%20Remis/VW_Scirocco_Remis_4.jpg" alt="">
</div>
</div>
CSS:
img{
width:100%;
max-height:120px;
overflow:hidden;
}
You will need to wrap the image in a div. Use the same css on a div and it should work.
Well, if you set the max-height to 120px it's not going to go over that, which is why the image is resizing. I'm not too sure what you're looking for here?
This may help you out: https://jsfiddle.net/uxp1cbto/
img
{
width: 100%;
max-height: 100%;
max-width: 100%;
overflow: hidden;
}
I have an image that is to be used as a background for a series of "slides" that are all contained within one page. There are four slides total. Each slide is the height of the screen. So I need the background to be 4x screen height. I would also like the image to scale with the screen width. The image is very tall and it does not matter what part of the background is on each slide, so keeping aspect ratios shouldnt be a problem.
The issue i am having is that when i make a window with a width smaller than the images width, part of the image gets cut off instead of scaling to the screen width. My css so far:
#container {
position:relative;
height:100%;
}
#background {
position:absolute;
width: 100%;
height:400%;
background:url(photo.png);
}
.slide {
width: 100%;
height:100%;
position:relative;
}
And the HTML:
<div id="container">
<div id="background"></div>
<div class="slide">
Content 1
</div>
<div class="slide">
Content 2
</div>
<div class="slide">
Content 3
</div>
<div class="slide">
Content 4
</div>
</div>
Note, must be compatible with IE8 and above (ie CSS3 stuff)
Maybe you could use something like that:
<div id="background">
<img src="img.jpg" class="stretch" alt="" />
</div>
and than in css
#background {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}
.stretch {
width:100%;
height:100%;
}
I dont know why you dont want to use css3, maybe you got some good purpose, but still I'd recommend to use that.
css3 code is :
background-size: 100%;
You can use Css3 property Background-size
#background {
background-size: 100%;
}