I'm making this responsive webpage: http://jsfiddle.net/GeDxr/174/
I need the images in the screen to be seperate, so I put them in a table. Problem is, the table screws up when resizing. Is there any way to keep the 'screen' a neat image, consisting of these different parts?
Current table / images in cell css:
table {
width: 100%;
background-color: #00BF6E;
min-height: 100%;
}
img {
width: auto;
height: auto;
}
Thanks!
You have a min-height on your images. I commented this out for you in the follwing code:
.css-mb .mb-screen img {
width: 100%;
/* min-height: 100%; <-- remove this */
position: center;
}
If you give a min-width and a min-height the images will get distorted because the width-height ratio changes (they both fill 100% of the available space). Using only a min-width makes sure the ratio stays intact.
Related
I want to make an image stay at a certain height, but I also want it to stay at the width of the user's screen.
Here's the image's CSS:
#cafe {
max-width: 100%;
height: 700px;
}
Here's the output:
you can try this
#cafe {
width: 100%;
height: 100vh;
}
here the 'vh' means VIEWPORT HEIGHT which automatically takes the user's screen height.
I was creating the about section of my site and was placing an image besides some text and now when i shrink the screen size the image for some reason is not taking up the full height of the containing <div>.. please check the fiddle and help me understand the reason for this.
The borders will show you the gap at the bottom which I don't want to show..
Please note that I do have bootstrap wired in as well for the project but I am not using it for this section.
Thanking all of you in anticipation
You've got min-width and max-width set on the images's parent, as follows:
.about-content {
box-sizing: border-box;
min-width: 200px;
max-width: calc(50% - 2em);
}
Remove the min / max width properties and it works (note, I've added a media query in the CSS as per below): https://jsfiddle.net/m9j61oua/7/
Although pretty pointless as I don't know any devices that go that small, you could wrap it in a media query :
#media (min-width: 201px) {
.about-content {
min-width: 200px;
max-width: calc(50% - 2em);
}
}
EDIT - Further to comments below, I think the only way forward for you is to use a background-image on the second div, here's a fiddle: https://jsfiddle.net/m9j61oua/14/
Relevant CSS:
.about-content.bg-image {
background-image: url(http://assets.worldwildlife.org/photos/1620/images/carousel_small/bengal-tiger-why-matter_7341043.jpg?1345548942);
background-size: cover;
min-height: 200px;
}
I've appended the class bg-image to your second div and removed the image element within it.
As you can see, it's not a perfect solution to what you're looking for, but with the right image and some media queries, you should be able to crack it.
The image isn't any higher. If you give it height: auto, it keeps its proportions, which usually is desired.
If you would set it to height:100%, it would be distorted, or (if you then set width to "auto") cut off a the sides.
One possibility would be to define the image as background image for its container and use background-size: cover; background-position: center; Background-repeat: no-repeat; on it. But this will cut off some parts of the image.
If you use background-size: contain;instead, you get the full image again, but with some space on either the sides or top and bottom.
img tag is inline-block by default, so you need something like this:
.about-content img {
display: block; /* remove extra space below image */
max-width: 100%;
height: 100%;
}
You have defined such style
.about-content img {
max-width: 100%;
height: auto;
}
which force browser to keep image aspect ratio.
Use image with correct aspect ratio or change style of img element.
There is a little change on line #14 in css. change max-width: 100%; to max-width: auto; height:auto to height:100% &
And Here is your code Make changes in your css and it will work. :
.about-content-wrapper {
margin: 2em 0 5em;
display: flex;
flex-wrap: wrap;
padding: 0 1em;
border:1px solid #ccc;
}
.about-content {
box-sizing: border-box;
min-width: 200px;
max-width: calc(50% - 2em);
}
.about-content img {
max-width: none;
height: 100%;
}
.about-content h2,
.about-content p {
margin: 0 1em 0 1em;
}
I've been making a tumblr theme using html/css and it allows the user to input their own image that will show up in their sidebar on the theme.
I'm not sure how to constrain the image to a certain region/size on the screen. What I have right now for the css of the image (which is probably excessive)
.sidebaricon {
margin-left: auto;
margin-right: auto;
width: auto;
height: auto;
max-width: 500px;
max-height: 500px;
}
But when I upload differently sized photos they don't constrain to the same size. I want all the uploaded images to constrain to a 500x500px square region.
Please help! Thank you.
As far as I understand, you try to upload an image and set it a max width. There's some mistakes in your code and some things that can be confusing (e.g. : your sidebar and its image have the same class).
First you need to set a width to your sidebar:
.sidebar { /* I renamed the container to avoid any misunderstanding */
width: 30%; /* or whatever */
max-width: 500px;
}
Then, the image in the sidebar :
.sidebar .sidebaricon { /* this should be your img */
max-width: 100%;
height: auto;
}
The logic is quite simple : you let the image to fill 100% of its parent's width, so you just have to play with the parent's width.
A lot of CSS frameworks use the same technic to provide a quick way to make all images "responsive", like this :
img {
max-width: 100%;
height: auto;
}
Again, this means : all images in the document body should have a maximum width of 100% of its container. I added the automatic height as some old IE doesn't keep the ratio by default.
When a user loads the page, I want an image to fill the entire screen. What I want is very similar to background-size:cover, but I want to be able to scroll down without the static background.
This is what I have so far:
body {
margin: 0;
}
#bg img {
z-index: -1;
position: absolute;
max-width: 100%;
}
The only problem with this, is that the image height is not restricted to the height of the browser window. height or max-height does not make any difference.
Is there any simple way of achieving this in pure CSS?
Use the vh and vw Viewport-Relative Length units.
#bg img {
height: 100vh;
width: 100vw; /* If you want it to be full width as well as height. */
}
I've created a responsive site and the images are set to:
max-width: 100%;
height: auto;
This is great and resizes the images for different screen devices and scaling of the window. However my images are varies sizes abut 5-30px differences. Is there a way to have them all the same height and width but also to auto scale.
I've tried adding height="170" and width="190" but this doesnt seem to work.
How can i have them set to the same size without manually resizing all images.
Example is here;
http://www.cartoonquiz-answers.com/Solutions/Level8
As you can see above the image for answer "King Julien" is slightly larger, as a result makes the next row with one image, instead of filling each row with 4 images.
thanks
If you want to force all images to the same size, just set a general CSS rule:
img
{
width: 190px;
height: 170px;
}
If you want them to scale, use percentages instead:
img
{
width: 100%;
}
This will force all images to fill their containers (and will maintain their aspect ratios).
You could force an aspect ratio:
.reviewname:before {
display: block;
content: "";
padding-top: 80%; /* aspect ratio */
}
.reviewname {
position: relative;
}
.reviewname > img {
position: absolute;
top: 0px;
width: 100%;
height: 100%;
left: 0px;
}
I think you have two options:
Use CSS background images (see below) or...
Crop/Resize the images to all the same height and width.
Here's a handy way to use background images: (not supported in all browsers)
<img style="background-image: url('/path_to_your_images/yourimage.png');" class="bgimg">
.bgimg {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}