I have two images centered side-by-side in a div. Both are restricted by a max-width property, but one image is significantly taller than another. I'd like the taller image to match the height of the smaller image and adjust its size based on viewport size.
My current code is as follows for the container
<div class="process">
<img src="http://via.placeholder.com/926x2260">
<img src="http://via.placeholder.com/1584x1926">
</div>
with the CSS as
.process {
text-align: center;
}
.process img {
margin: 4rem 3rem;
display: inline-block;
max-width: 40%;
}
A max-height of 740px looks perfect with a full-sized viewport but isn't responsive. I'd like this to be done in CSS and without an extra container for the larger image, but I'm not sure if that's possible.
Here's a jsfiddle to see what it looks like.
The images are a screenshot of a mobile and tablet layout of a website, so they should retain their ratio--if there's a better way to display these I'll take other ideas too!
Make them size based on the parent div. Check this out:
.process {
text-align: center;
height: 70vh;
}
.process img {
margin: 4rem 3rem;
display: inline-block;
width: auto;
}
Related
I'm developping an ionic application, and i want to display some images in some cards, the problem is that my images have not the some size, and i want them to look the some.
The idea is to use à css class that will solve the problem ( at least in the width )
.full-width-image {
width: 100%
}
this class will solve the problem of size and all the images will have the some width. how ever i dont know how to make a fixed height for them all. if i add to my css class a fixed height like:
.full-width-image {
width: 100%;
height: 60px;
}
some pictures will look ugly:
how it looks like
what i want is to hide the extra part of the image.
If you have a set width and height you can use object-fit: cover; for the image to fill the entire space without losing its aspect ratio.
I would recommend you to use a flex wrapper around an image.
.wrapper {
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 0 2px gray;
width: 100px;
height: 100px;
overflow: hidden;
margin: 1em;
}
.wrapper img {
border: 1px solid black;
max-width: 100%;
max-height: 100%;
}
.example {
display: flex;
}
<div class="example">
<div class="wrapper">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">
</div>
<div class="wrapper">
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a">
</div>
<div class="wrapper">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg">
</div>
<div>
Using this technique you get a kind of smart image - it scales itself to fit your wrapper, its fixed size, but without distortion. Look, there are black borders around the images, so you can see that both an image with width > height and an image with a tree, where height > width, fit well the wrapper, restricting the width and the height correspondingly.
Also you can you inline-flex instead of flex in the wrapper class.
I'm attempting to create a simple responsible logo inside of a navbar. I've recreated the problem with this codepen.
Essentially I have a .logo wrapper around an <svg> logo:
#navbar .logo {
height: 80px;
}
#navbar .logo svg {
width: 100%;
height: 100%;
display: inline-block;
overflow: hidden;
padding: 20px 0;
}
At around 500-600px in width you can see that the SVG element box is much wider than the actual logo. I can fix this by removing the height rule on the .logo div. But then the SVG goes beyond 80px in height.
How can I constrain the navbar height to 80px and maintain the actual width of the SVG so that the logo remains flush against the left side of the container?
If I replace width: 100%; with width: auto;, the logo flushes to the left like I want, but then the .logo div is much larger than the SVG.
I'm not sure if this is what you wanted. I set a max-width to the div .logo and made the width of the svg to 100%.
Check this out: https://codepen.io/samuellawrentz/pen/LBzRwM?editors=1100
I have a two column layout - fixed right column width, an scalable content in the left column.
The layout scales great with different screen sizes until I add images to the scalable column. If the container goes down to the size of the image it pushes the column too wide, squashing my 300px right column.
I set
width:100%;
on the images, which solves the responsiveness issue, but when the container is full screen again the images scale to fill it, which is not what I want because it looks rubbish. I've added
max-width:100%;
which hasn't helped.
In short, I want the image behaviour to be "Be your real size, unless the container is smaller, in which case shrink."
(I should mention that my two-column layout is done with flexbox)
Edit:
After playing around with this for ages, it turns out to be a difference in behaviour between broswers - Chrome scales the container, shrinking the image (as per max-width) but Firefox just pushes all the content out. Open this in each: https://jsfiddle.net/andyg1/sb7zefr5/
Remove width:100%; and keep max-width:100%;. This will keep images at their original size but shrink them to 100% width if the container is smaller.
Here's an example https://jsfiddle.net/v4kL409v/
You can use width: 100% and the real size if the image or the maximum size of the conainer as max-width, for example
my_image {
width: 100%;
max-width: 320px;
}
That way it will shrink with the container, but not grow above a set size.
You can use an image as a background to your flex-item.
background-image, background-repeat, background-position, and most importantly background-size
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
}
.flex {
display: flex;
justify-content: center;
width: 100%;
height: 100%;
}
.bg {
width: 50vw;
height: 50vh;
background: url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png) no-repeat center;
background-size: contain;
outline: 3px dashed red;
flex: 1 0 50%;
}
.rt {
width: 300px;
height: 50vh;
outline: 3px dashed blue;
}
<div class="flex">
<figure class="bg"></figure>
<figure class="rt"></figure>
</div>
After identifying that the problem is different between Firefox and Chrome I did some research to find out that the problem can be fixed by adding:
min-width:0;
to the element containing the responsive. As discussed here: Firefox flexbox image width
Add display:block to image.
.my_image {
display:block;
max-width:100%;
height:auto;
}
I have a div profile_pic which has the following CSS:
#profile_pic{
position:absolute;
border:1px solid #E1E3E4;
left:25px;
top: 25px;
width: 200px;
height: 200px;
}
Since profile picture for my application can be any image (of any size), the div or image, should be flexible to adapt to one another. I have tested a profile picture with the dimensions of 300px width and 300px height and the image renders perfectly in the the div. However, when I upload a picture with say, 550px width and 400px width the image is appearing "squashed" which is understandable.
There are two options, 1. resizing the image so that the whole image appears in the div and 2. cropping the image so that the image adapts to the div size. I do not mind adopting either of these approaches but I am unable to implement how these approaches in code.
I have tried to set:
#profile_pic {width: 50%}
#profile_pic img {width:100%}
But it just does not work. How can I get the div (or image) to always fit in the div's size without the image losing it's quality?
You could just add background-size:contain; to the div that has the image (assuming you are setting the background image the image you want.
losing quality is another thing, scaling say a 50x50px image to 100x100 is going to lose quality, so it would probably be best to set a minimum size the profile picture can be.
You may set max-width and max-height in order to resize image to fit inside the box without overflow, add line-height and text align to center image in case it has not the same box ratio.
#profile_pic,
.profile_pic2 {
position: absolute;
border: 1px solid #E1E3E4;
left: 25px;
top: 25px;
width: 200px;
height: 200px;
line-height: 197px;
/* since image is the one and single child */
text-align: center;
border: solid;
/*demo purpose */
}
.profile_pic2 {
left: 250px;
}
.profile_pic2 +.profile_pic2 {
left: 450px;
}
#profile_pic img, .profile_pic2 img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
/* set on middle baseline setted at 200px */
}
<div id="profile_pic">
<img src="//lorempixel.com/640/480">
</div>
<div class="profile_pic2">
<img src="//lorempixel.com/480/640">
</div>
<div class="profile_pic2">
<img src="//lorempixel.com/480/480">
</div>
I have a paragraph floated in right and an image floated in left. They are staying in the same row.
Now I want to make the paragraph and image height always be the equal, whichever browser they run in or whatever the window or screen size they get. Their size should match automatically. How do I do it?
In my program I have used width and height, but I am not sure they can fix the size automatically.
This piece of code I am working in: Also look in https://jsfiddle.net/d6pyyub2/
.HTML:
<p>
The height of this paragraph must be the same as the height of
the picture.
The height of this paragraph must be the same as the height of
the picture.
The height of this paragraph must be the same as the height of
the picture.
</p>
<div id="image">
<img alt="" src="http://upload.wikimedia.org/wikipedia/commons/b/ba/Flower_jtca001.jpg" width="200" height="200" >
</div>
.CSS:
p{
margin-left:240px;
}
#image{
margin-top:-210px;
}
By adding a container you can set a block size dependent of another block size.
You set the image fixed to border of the container
#image{
position: absolute;
top:0px;
bottom:0px;
}
#image img {
height: 100%;
width: auto;
}
#container
{
position: relative;
}
The p block set the height of the #container, and the image block follow the move. Fixed size by attributes in img tag are removed to set it at the full height of #image block.
https://jsfiddle.net/d6pyyub2/6/
edit:
As Daniel Ruf says in comment, there is a ratio problem with the image. Another solution is to set the image to the background of #image container.
https://jsfiddle.net/d6pyyub2/7/
In order to keep the ratio, the image will stop scale up his size if its witdh need to be superior to 240px, the fixed width of the first col.
There you go: http://jsfiddle.net/d6pyyub2/4 this should solve your problem
.image {
width: 200px;
height: 200px;
float: left;
margin-right: 10px;
}
.para {
line-height: 1.5;
text-align: justify;
padding-right: 5px;
}