Imagine websites like 9Gag. You upload an image and they display it always with the same width and only the height changes.
How can I achive this? I cant even resize my images hardcoded.
CSS:
.post img{
height: 200px;
width: 300px;
}
HTML:
<div class="post">
<img src="img/bf1.jpg">
</div>
The image stays the same size.
You should change CSS style to:
.post img{
height: auto;
width: 300px;
}
Have you tried:
<div class="post">
<img height="200px" width="300px" src="img/bf1.jpg">
</div>
Hope this helps!
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.
before anything: No I don't mean centering an image inside a div
WHAT I WANT TO DO IS SIMILAR TO THE DESKTOP 'CENTER' OPTION HENCE THE TITLE PLEASE DON'T BE CONFUSED I JUST DON'T KNOW THE SUITABLE TERM OF WHAT I WANT
I am making a certian css template for my use, but I have this question that I couldn't figure out ..
basically, there is an image before each post, so the width is known. I set it to 100% of a container called "post". post has a width of 75% of the browser
<div class="post">
<h1>post title</h1>
<img class="post-img" src="myImg.png" />
<!--other elements-->
</div>
css:
.post {
width: 75%;
.post-img {
max-width: 100%;
}
Now to the problem ..
although the width now is fixed regardless of the image, the height is pretty much automatic
I want to set the height to a certain value, like max-height: 500px; for example .. so when a picture is big:
make width = 100% of the post div
is the height > 500px? no then make it auto. yes then crop the extra part
an image
as you can see, the black stroke is the limited width and height
the width was checked first so no extra parts to the left and right
the height is more than 500px, so it will be cropped and the viewed image would be the one inside the black frame
Like i said overflow:hidden; is the one you need
.container{
width: 700px;
}
.post {
width: 75%;
overflow:hidden;
border:2px solid #f63;
}
.post img{
max-width: 100%;
}
<div class="container">
<div class="post">
<h1>post title</h1>
<img class="post-img" src="http://www.petsworld.in/blog/wp-content/uploads/2014/09/adorable-cat.jpg" />
<!--other elements-->
</div>
</div>
What you are trying to achieve may be something like that, using background instead of <img>, so you have a much more simple control on the image :
.post {
width: 75%;
}
.container {
width: 100%;
height: 500px;
overflow: hidden;
background: url('https://s3-eu-west-1.amazonaws.com/hasselblad-masters/web-hi-res-content/X1D-Sample-Images/X1D5_B0001993.jpg') center no-repeat;
background-size: cover;
}
<div class="post">
<h1>post title</h1>
<div class="container">
</div>
<article>
<p>Other content</p>
</article>
</div>
I think what you need is to wrap your image in a container and set the maximum sizes and overflow:hidden; on that container
Something like:
<div class="post">
<h1>post title</h1>
<div class="img-container">
<img class="post-img" src="img.jpg" />
</div>
</div>
<style>
.post {
width: 75%;
}
.img-container {
max-width: 100%;
max-height: 100px;
overflow: hidden;
}
</style>
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;
}
Hi I'm trying to create an image gallery that centers rows of images with fixed dimensions. The issue is the number of images in each row will change depending on the window size so I can't use mutiple containers and margin: auto them. Here is an example page that does what I'm after:
http://inspire-gwen.tumblr.com/
You'll notice that as you change the size of the window, the image rows change, but each one is still centered on the page. Is it possible to implement this with purely CSS? This is the code I have written, with some random images:
HTML
<!DOCTYPE HTML>
<body>
<div class="img_container">
<div><img src="http://www.tolooeyaran.com/wp-content/uploads/2014/09/City-Of-Paris-France-Tour-Eiffel-640x360.jpg"></div>
<div><img src="https://lh3.googleusercontent.com/-h0DGPrWkU-M/AAAAAAAAAAI/AAAAAAAABJY/0l_GW_IzQk4/photo.jpg"></div>
<div><img src="http://i.imgur.com/ElxvqJK.jpg"></div>
<div><img src="http://i-cdn.phonearena.com/images/articles/168223-image/First-HTC-One-M9-wallpaper.jpg"></div>
</div>
</body>
CSS
.img_container img {
max-height: 300px;
display: block;
width: auto;
height: auto;
vertical-align: bottom;
}
.img_container div {
padding: 5px;
}
Images are by default inline items, wrapping them in 'div' tags is currently causing them to be block items. You could get by with simpler with this:
HTML
<!DOCTYPE HTML>
<body>
<div class="img_container">
<img src="http://www.tolooeyaran.com/wp-content/uploads/2014/09/City-Of-Paris-France-Tour-Eiffel-640x360.jpg">
<img src="https://lh3.googleusercontent.com/-h0DGPrWkU-M/AAAAAAAAAAI/AAAAAAAABJY/0l_GW_IzQk4/photo.jpg">
<img src="http://i.imgur.com/ElxvqJK.jpg">
<img src="http://i-cdn.phonearena.com/images/articles/168223-image/First-HTC-One-M9-wallpaper.jpg">
</div>
</body>
CSS
.img_container {
text-align: center;
}
.img_container img {
max-height: 300px;
width: auto;
height: auto;
vertical-align: bottom;
margin: 5px;
}
Yes, this is very possible..
so far you have been using px to define the image width... what you need is %.
Here is the JSFIDDLE: http://jsfiddle.net/uh1wvaev/2/
Here is my code:
HTML
<div class="img_container">
<div class="img_wrapper">
<img src="http://www.tolooeyaran.com/wp-content/uploads/2014/09/City-Of-Paris-France-Tour-Eiffel-640x360.jpg">
</div>
<div class="img_wrapper">
<img src="https://lh3.googleusercontent.com/-h0DGPrWkU-M/AAAAAAAAAAI/AAAAAAAABJY/0l_GW_IzQk4/photo.jpg">
</div>
<div class="img_wrapper">
<img src="http://i.imgur.com/ElxvqJK.jpg">
</div>
<div class="img_wrapper">
<img src="http://i-cdn.phonearena.com/images/articles/168223-image/First-HTC-One-M9-wallpaper.jpg">
</div>
</div>
CSS
.img_wrapper {
width: 25%;
float: left;
}
img {
width: 100%;
}
What I did was, I gave each <DIV></DIV> a class of "img_wrapper". Then I gave each img_wrapper a width of 25% of the page. Therefore whenever the page is resized, the img will be given a width of 25% of the new window size.
If you have any questions, or need further assistance please leave a comment below