I'm using media queries to turn my website more responsive but I'm not sure how to do that with images.
I've used position: absolute otherwise when the screen became really narrow the images would "get out" of the screen width and disappear to the left. So I would like some way that they could stay in the centre but either with a smaller size or in a column display which I can't figure it out how to do without them staying on top of each other. Can someone help me with this?
As you won't have the images to see the actual effect this is how it looks with a screen with a wide width :
This is how it looks with the properties that I used to centre them in a narrow screen:
and even more narrow
This is the code I used:
#media screen and (max-width: 1100px) {
.header-container.row,
.section-1.row,
.section-2.row,
.section-3.row,
.section-5.row,
.section-6.row,
.section-7.row {
flex-direction: column;
.work-images {
position: relative;
}
.first-line.row,
.second-line.row {
display: flex;
flex-direction: column;
position: absolute;
justify-content: center;
}
.pcontainer {
width: 350px;
}
.first-line img,
.second-line img {
width: 100%;
height: 250px;
object-fit: cover;
}
<div class="row work-images">
<div class="row first-line">
<div class="pcontainer">
<img src="magazine.jpg" width="333.33" height="250" class="image" />
</div>
<div class="pcontainer">
<img src="Magazine3.jpg" width="333.33" height="250" class="image" />
</div>
</div>
<div class="row second-line">
<div class="pcontainer">
<img src="poster.png" max-width="450" height="250" class="image" />
</div>
<div class="pcontainer">
<img src="poster2.png" max-width="450" height="250" class="image" />
</div>
</div>
</div>
Related
I am building a webpage for homework purposes and I am struggling to fit in four photos with different dimensions in a grid layout. To be more specific I have to make that grid layout be responsive as a 4-grid layout on Desktop view, 2-grid layout on Tablet view, and Mobile view. I have tried a lot of advice from different articles but none of them seems to be working.
CSS code:
.services{
float: left;
width: 25%;
height:100vh;
max-width:100%;
object-fit:cover;
}
#media only screen and (max-width: 1180px) {
.services{
width: 50%;
}
}
HTML code:
<div>
<div class="services">
<img src="./Photos/services-1.jpg"></img>
</div>
<div class="services">
<img src="./Photos/services-2.jpg"></img>
</div>
<div class="services">
<img src="./Photos/services-3.jpg"></img>
</div>
<div class="services">
<img src="./Photos/services-4.jpg"></img>
</div>
</div>
Current look:
I want photos to be in a line for each occasion with certain dimensions.
Any thoughts?
Thanks for submitting your question! Instead of using markup for placing your images, I would suggest using with a background-image. Why? With background-image you can use 'background-size: cover' wich make the image cover the whole with a custom height, so the columns are all equal.
Trying to achieve this with regular tags needs a some sort of resizer or the images need to be the same width and height already.
Below my code! Tip: You don't have to close the tag, you can use it without the closing image tag.
HTML
<div>
<div class="services">
<div class="image-box" style="background-image: url('https://source.unsplash.com/random');"></div>
</div>
<div class="services">
<div class="image-box" style="background-image: url('https://source.unsplash.com/random');"></div>
</div>
<div class="services">
<div class="image-box" style="background-image: url('https://source.unsplash.com/random');"></div>
</div>
<div class="services">
<div class="image-box" style="background-image: url('https://source.unsplash.com/random');"></div>
</div>
CSS
.services{
float: left;
width: 25%;
height:100vh;
max-width:100%;
object-fit:cover;
}
.services .image-box {
width: 100%;
height: 400px;
background-size: cover;
}
#media only screen and (max-width: 1180px) {
.services{
width: 50%;
}
}
Try this, for grid you need to define display: grid; in the parent div
.grid{
display: grid;
grid-template-columns: repeat(4,1fr);
}
.services{
height: 100%;
width: 100%;
}
#media only screen and (max-width: 1180px) {
.grid{
display: grid;
grid-template-columns: repeat(2,1fr);
}
}
in HTML , in the place of 'level' add your image code it will work in both responsive
<div class="grid">
<div class="services">
level
</div>
<div class="services">
level
</div>
<div class="services">
level
</div>
<div class="services">
level
</div>
</div>
if you want the image to be cover add this in img class object-fit: cover;
This will work fine .
I have a simple slick carousel
<div class="your-class">
<div class="slider">
<img src="assets/img/train.jpg" alt="">
</div>
<div class="slider">
<img src="assets/img/plane.jpg" alt="">
</div>
<div class="slider">
<img src="assets/img/truck.jpg" alt="">
</div>
<div class="slider">
<img src="assets/img/ship.jpg" alt="">
</div>
</div>
.slick-track {
display: flex !important;
}
.slick-slide {
height: inherit !important;
display: flex !important;
justify-content: center;
}
.slider {
max-height: 400px;
}
.slider img {
width: 100%;
height: auto;
}
As you can see I want to change the size of slider to 400px but the image looks flattened. If I remove slider height then the picture is too big with vertical scroll,I need to make img's height be approx 400px. Can you please help what I can do ?
I'm working in movie production website and trying to display movies images in equal size but i have different sizes of images and i need to place image in div like full size i.e all four corners should be zoomed in. Please help.
MY CODE
<div id="movies-images">
<img class="img-fluid" src="images/a4.jpg">
</div>
CSS :
#movies-images{
width: 100%;
height: 100%;
}
I want images to equal in width and height.
Try this:
.img-box {
display: flex;
justify-content: space-between;
}
.movies-images {
width: 33%;
height: auto;
}
.movies-images img {
width: 100%;
display: block;
}
<div class="img-box">
<div class="movies-images">
<img class="img-fluid" src="http://lorempixel.com/800/600/">
</div>
<div class="movies-images">
<img class="img-fluid" src="http://lorempixel.com/800/600/">
</div>
<div class="movies-images">
<img class="img-fluid" src="http://lorempixel.com/800/600/">
</div>
</div>
I'm trying to place links on images in one row so that different images have different links. I'm also having this div to shrink to fit certain media screen sizes. However, the images didn't resize according to the wrapper requirements. Please help.
Here's the HTML:
.box {
width: 100%;
float: left;
margin: 0;
padding: 0;
position: relative;
}
#media screen and (min-width: 768px) and (max-width: 1024px) {
body {
text-align: center;
background: url(image/bg.png) center top;
}
#wrapper {
width: 768px;
margin: 0 auto;
background-color: #fff;
}
}
#media screen and (min-width: 1024px) {
body {
text-align: center;
background: url(image/bg.png) center top;
}
#wrapper {
width: 500px;
margin: 0 auto;
background-color: #fff;
}
<div id="wrapper">
<div class="box">
<img src="image/pea.jpg">
</div>
<div class="box">
<img src="image/pea_01.jpg">
<img src="image/pea_02.jpg">
<img src="image/pea_03.jpg">
<img src="image/pea_04.jpg">
<img src="image/pea_05.jpg">
</div>
<!-- main issue here -->
<div class="box">
<img src="image/pea_footer.jpg">
</div>
</div>
Here's a screenshot of the line up (desktop). Mobile seems to look ok after adding display:inline-block;
width:auto; to .box:
I reckon remove any static widths because you only need to detect when the viewport is a certain size and then change the img width then, as I have done here. I set each image to display block to remove any margin or padding around them. You might prefer to not do this, but I like setting this as default.
This way you can pick different breakpoints that suit you rather than setting static widths at each breakpoint. This is the beauty of responsive development. Stay flexible rather than controlling what happens to containing divs; let the content run things. Run this snippet below in Full Screen mode to see the full desktop styling (each img goes to 20% instead of 50%):
.box {
width: 100%;
float: left;
margin: 0;
padding: 0;
position: relative;
}
img {
display: block;
width: 20%;
float: left;
}
#media screen and (max-width: 767px) {
img {
width: 50%;
}
}
<div id="wrapper">
<div class="box">
<img src="http://placehold.it/100x100">
</div>
<div class="box">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
<img src="http://placehold.it/100x100">
</div>
<!-- main issue here -->
<div class="box">
<img src="http://placehold.it/100x100">
</div>
</div>
Your .box could be in display:flex
.box {
display: flex;
flex-flow: row nowrap;
justify-content: space-around;
}
Keep in mind that your 5 <img> should be the icons, not containing your background (the clouds).
And I think the following code would be correct for your images:
.box img {
max-width: 20%;
}
I think it's better to not apply an explicit width or height to the image tag.
Please try:
max-width:100%;
max-height:100%;
Just use percentage based layouts rather than pixels or other measurements.
For example:
<img width="50%">: that will fill half of the containing element, at any size
<img width="500px">: that will always fill exactly 500 pixels, if it's too big or if it's too small.
I need to align images like this photo. My code is:
<html>
<head>
<style>
.main
{
width: 634px;
height: 634px;
}
.img1
{
width: 315px;
height: 315px;
}
</style>
</head>
<body>
<img src="photo/01.jpg" class="main"><br>
<img src="photo/05.jpg" class="img1">
<img src="photo/01.jpg" class="img1">
<img src="photo/01.jpg" class="img1">
</body>
</html>
I want to create instaframe effect on html page. But I cant add images to the right side
You can use floating to achieve your desired effect:
.main {
width:80%; /* width can be anything */
overflow:auto; /* clears floating */
}
.main img {
width:33.33%; /* images are responsive, usually 3 images per row (33.33) */
height: auto; /* resize height based on width to keep image proportion */
float:left; /* float images to the left */
border:2px solid white; /* optional border */
box-sizing:border-box; /* makes sure border does not break total width */
}
.main img.big {
width:66.66%; /* big image takes 2/3 of grid size, so 66.66 of 100 */
}
<div class="main">
<img src="https://placehold.it/100x100" class="big">
<img src="https://placehold.it/100x100">
<img src="https://placehold.it/100x100">
<img src="https://placehold.it/100x100">
<img src="https://placehold.it/100x100">
<img src="https://placehold.it/100x100">
</div>
It is best to wrap the floated elements inside a common parent so that they do not affect the rest of page elements. In this case, the parent is <div class="main">.
jsFiddle
You can use CSS3 flexbox to achieve this;
See code below; you probably also want to use % or ems instead of fixed height/width;
using float as per answer above is more beautiful of course, flexbox is just one more way to achieve same results
Demo: jsFiddle
.main {
width: 300px;
height: 300px;
}
.img {
width: 150px;
height: 150px;
}
.rowContainer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.columnContainer {
display: flex;
flex-direction: column;
}
.mainContainer {
width: 450px
}
<div class="mainContainer">
<div class="columnContainer">
<div class="rowContainer">
<img class="main">
<div class="columnContainer">
<img class="img">
<img class="img">
</div>
</div>
<div class="rowContainer">
<img class="img">
<img class="img">
<img class="img">
<img class="img">
<img class="img">
<img class="img">
</div>
</div>
</div>