I need to implement the CSS for the image (attached).
Gallery
I'm retrieving 6 images from third party. I need to display the images so that all 6 images display on the different screen widths. I'm only optimizing for screen widths >= 1024px. So if the screen width is less than 1024px the images are the same size as the images would be at 1024px. 2 of the images have an aspect ratio of 1:1. Two have an aspect ratio of 4:3. Two have an aspect ratio of 16:9.
How would you display the images using CSS so that all of the images show as the screen gets smaller (up to 1024px in width), and maintain the aspect ratio? Basically, how would you implement the CSS to make this row of images responsive?
Right now I have the following structure:
<article class="sample">
<img src ="ex1.jpg" />
</article>
<article class="sample">
<img src ="ex2.jpg" />
</article>
<article class="sample">
<img src ="ex3.jpg" />
</article>
<article class="sample">
<img src ="ex4.jpg" />
</article>
All of the images need to have the same height while keeping their aspect ratio.
I'm using inline block on the "sample" element. I set a height for all images for each screen width breakpoint (1024, 1280, 1440) and set the width to auto.
so at 1024, I set the height of img to 150px. At 1280, I set the height to 160px. At 1440px, I set the height of img to 166px. I was given advice to set the height to Xvw instead of setting a height for each breakpoint.
I assume you are trying to recreate something similar to your gallery, I thought about using the css display:flex property.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Here's the code:
HTML:
<div class="container">
<div class="article" style="flex-grow: 1.77">
<img src="http://www.lorempixel.com/177/100" alt="">
</div>
<div class="article" style="flex-grow: 1">
<img src="http://www.lorempixel.com/100/100" alt="">
</div>
<div class="article" style="flex-grow: 1.33">
<img src="http://www.lorempixel.com/133/100" alt="">
</div>
<div class="article" style="flex-grow: 1" >
<img src="http://www.lorempixel.com/100/100" alt="">
</div>
<div class="article" style="flex-grow: 1.77" >
<img src="http://www.lorempixel.com/177/100" alt="">
</div>
<div class="article" style="flex-grow: 1.33">
<img src="http://www.lorempixel.com/133/100" alt="">
</div>
</div>
CSS:
.container {
display: flex;
width: 100%;
min-width: 1024px;
}
.article img {
width: 100%;
height: auto;
}
Fiddle:
https://jsfiddle.net/xmqLrtbk/
Set one dimension using percent, and the other auto. example:
img{width:100%;height:auto;}
jsFiddle Demo
Related
I am trying to use CSS3 flexbox to align three images horizontally while responsively changing the width of the picture being displayed. It needs to dynamically resize and center on a mobile device. I have found several related questions.
I have come up with two incomplete approaches as follows:
This works to align them horizontally, but the issue is one of the images has a different height and I am not sure how to make it auto-size. I want that image to preserve its ratio but take up the same with. I also don't know what approach to take to make it center all the images on mobile, other than using a media query and having it float:center. In practice I couldn't get that to work.
My other idea was to create an image grid of sorts. I couldn't figure out how to get them to align correctly, even on desktop. I would want the individual ration of the images to be preserved, but have them take up 1/3 of the window width and resize the image as necessary dependent on the window width. Once it reaches 480px width, center the images with each the same width but still preserving its individual proportion.
With object-fit and flex-aligning the elements to the elements to center, you can have them all aligned no matter the image ration, then for mobile it would be only matter of changing the flex-item width to 50%, 100%, or whatever you want with #media query
*{
box-sizing: border-box ;
}
.flex-container {
background: darkred;
flex-direction:row;
display: flex;
align-items: center;
width: 100%;
flex-flow: row wrap;
}
.flex-item {
padding: 20px;
width: 33.33%;
order: 1;
}
.flex-item img{
max-width: 100%;
object-fit: contain;
}
<div class="flex-container">
<div class="flex-item">
<img src="https://alumni.csum.edu/image/content/emails/TellMeSomethingGood.png" alt="">
</div>
<div class="flex-item">
<img src="https://kyuyoungshipperindo.files.wordpress.com/2014/06/something.jpg" alt="">
</div>
<div class="flex-item">
<img src="https://alumni.csum.edu/image/content/emails/TellMeSomethingGood.png" alt="">
</div>
<div class="flex-item">
<img src="https://kyuyoungshipperindo.files.wordpress.com/2014/06/something.jpg" alt="">
</div>
<div class="flex-item">
<img src="https://kyuyoungshipperindo.files.wordpress.com/2014/06/something.jpg" alt="">
</div>
<div class="flex-item">
<img src="http://www.sypte.co.uk/uploadedImages/Media/Press_Releases/see%20something.JPG" alt="">
</div>
<div class="flex-item">
<img src="https://alumni.csum.edu/image/content/emails/TellMeSomethingGood.png" alt="">
</div>
<div class="flex-item">
<img src="http://www.sypte.co.uk/uploadedImages/Media/Press_Releases/see%20something.JPG" alt="">
</div>
</div>
I'm working on a website project where in the header section I have a grid of 6 images (2 rows with 3 images in each). It's not a problem to make them responsive (kinda "liquid") with max-width:100% and height:auto, however this website should be linked with some admin tool in the future, so the end user(s) could upload their own images.
Hence, I need to understand how keep these two rows of images responsive but at the same time give them a fixed height (in this case they should be 220px). When I crop the images and make them all equal in height (using Photoshop), everything works fine, but as soon as I use images with different height values, the grid starts to break. Is there any known workaround for this?
Thanks in advance!
Use percents and #media
Example :
#media only screen and (min-width : 320px) {
img {
width:40%;
height:60%; /*Images should be bigger in small devices*/
}
}
#media only screen and (min-width : 480px) {
img {
width:30%;
height:55%;
}
}
Please Note : The percent is calculated from parent. For example if you put an image in a div with width : 400px and height : 300px, it will show the image with 160px width and 180px height on device with min-height of 320px.
max-height is another choice.
Well, let's see if I understood good enough your question (my bad english, not yours).
If yoy want 2 rows, 220px height each with 3 images each filling the width of the row while keeping the same height as the parent, the problem you may have is that the images will distort to adapt to their responsive parent container.
This may not work for you as even if your images are simillar in aspect ratio (height x width) once the window width is small (responsive) they will get distorted too much.
Here is an example: I've use different sizes images some horizontal and some vertical so it can be easier to understand.
Basic html:
<div class="header">
<div class="row">
<div class="img">
<img src="" />
</div>
<div class="img">
<img src="" />
</div>
<div class="img">
<img src="" />
</div>
</div>
<div class="row">
<div class="img">
<img src="" />
</div>
<div class="img">
<img src="" />
</div>
<div class="img">
<img src="" />
</div>
</div>
</div>
Please notice that the row is 240px insteed of 220 just so you can see easily the row (with red background) and I add for the same reason a white border to the image containers.
FIDDLE
The option I would try though is to make the images fit into the container without distortion, they will fit in height OR in width, but of course, they will leave space at the sides if it fit height or on top and bottom if fit in width but at least the images will be always centered in the container:
the green color is the background of the images container:
FIDDLE
There may be better options but without the help of jquery I can't help you more
If your goal is to keep the images (or their container's) height fixed, that will mean that the images will not be stretching or contracting in a fluid way. Given that this concept is contradictory in practice, I will instead show you a 'responsive' solution that comes from making container elements themselves responsive rather than instead of the images.
The case you're referring to (2 rows 3 images) sounds like a great place to implement a cascading images look-and-feel. When the page width shrinks the images will float under each other whereas viceversa when the website width is stretched; this in essence achieves a fluid and responsive functionality without affecting the image heights themselves. The below code should apply the 'building blocks' you'll be needing for in order to achieve this effect... granted there is a lot of custom work you can do here (like using background: cover, instead of img tags as suggested in the comments). Take a look and let me know if this helps you get closer to what you're trying to achieve.
HTML
<div class="wrapper bg-purple center-div">
<div class="img-container left">
<img src="http://placehold.it/200x200"/>
</div>
<div class="img-container left">
<img src="http://placehold.it/200x200"/>
</div>
<div class="img-container left">
<img src="http://placehold.it/200x200"/>
</div>
</div>
<div class="clear-both"></div>
<div class="wrapper bg-cyan center-div">
<div class="img-container left">
<img src="http://placehold.it/200x200"/>
</div>
<div class="img-container left">
<img src="http://placehold.it/200x200"/>
</div>
<div class="img-container left">
<img src="http://placehold.it/200x200"/>
</div>
</div>
CSS
.wrapper {
display: table;
}
.img-container {
height: 50px;
padding: 2px;
}
.center-div {
margin: 0 auto;
}
.left {
float: left;
}
.clear-both {
clear: both;
}
.bg-purple {
background-color: purple;
}
.bg-cyan {
background-color: cyan;
}
#media only screen and (max-width: 450px) {
.left {
clear: both;
}
}
Suppose I have images inside a div where I specify div width 100% but images size is not getting responsive.
Here is sample. just see and guide me what kind of CSS I need to add for div as a result whatever is there inside div will be responsive as per screen size.
<div class="headerCarouselwrapperOuter" style="width: 100%">
<div class="headerCarouselwrapper">
<img src="Images/new-bba-header-image1dyna.jpg" alt="" />
<img src="images/new-bba-header-image2dyna.jpg" alt="" />
<img src="images/new-bba-header-image3dyna.jpg" alt="" />
<img src="images/new-bba-header-image4dyna.jpg" alt="" />
</div>
</div>
Default div width in 100%, to make image responsive mention
img{
max-width:100%;
height:auto;
}
in your css.
#headerCarouselwrapperOuter, .headerCarouselwrapper {width:100%;}
.headerCarouselwrapper img {display:block;width:100%;}
Add this to your CSS and this should make your images responsive
I have a problem with Bootstrap css. I have a panels with header, body and footer. The body contains an image. Each of the images have been resized to the same 700px width and 450px height. Yet the panels end up different sizes with the footer not being aligned to each other.
How can this be fixed?
.cshtm code:
<div class="col-md-4 col-sm-6">
<div class="panel">
<div class="panel-heading">
Visual Similarity Duplicate Image Finder
</div>
<div class="panel-body">
<a href="portfolio-item.html">
<img class="img-responsive img-blog img-hover" src="#ViewBag.AccreditationImage2" alt="">
</a>
</div>
<div class="panel-footer">
<p>Accreditation test Progress: 10%</p>
<p>Version: 5.5.0.1</p>
<p>Vendor: MindGems, Inc.</p>
</div>
</div>
</div>
and the ubiquitous image:
UPDATE
It turns out the natural height of the images are indeed different even though they were all resized the same. Anyway, how can I force the images in the panel to all be the same size?
Can't tell what is happening in your case specifically without seeing the css but you should just be able to set the height attribute on the image or container:
<style>
.panel-body {
height : 450px
}
</style>
or:
<style>
.panel-body img {
height : 450px
}
</style>
In responsive page layout, I want to increase the height of image keeping the width constant.
When I change image width, it reflects but changing the height does not make difference.
So I added 100% height to parent div .content container. But that also does not make any difference.
How can I increase the height here keeping width constant?
FIDDLE : http://jsfiddle.net/g83e8/
I have used container as below:
<div id="content1" class="content">
<div class="container">
<div class="img-container1">
<img src="http://placehold.it/931x754" alt="..." class="img-responsive img-rounded">
</div>
<div class="text-container">
<p>TEST</p>
</div>
<div class="another-container">
<p>TEST</p>
</div>
</div>
</div>
css:
.content > container {height: 100%;}
.img-container1 { float:left; height:60% !important; width:50%}
To increase the height of the image only, you can use styling like this:
<img src="http://placehold.it/931x754" alt="..." class="img-responsive img-rounded" style="height: 100px">
Using pixels instead of percentages allows you to more easily control the size, as the size is not inherited from the parent elements when using pixels.