I've the following markup for a page which is mobile ready:
<section>
<div class="cover-section">
<img src="img/central-park.jpg" alt="" style="width:100%" class="hoverZoomLink">
</div>
<div class="logo-section">
<div class="container postLeft hiddenClass visibleClass animated fadeInLeft">
<img src="img/logos/instagram.png" alt="">
</div>
</div>
</section>
The problem is, since I provided width:100% for the imgin the mobile view, the whole image is appeared to be proportionate and as a result, very small. (Since this image is very wide).
Is there any way that I can display the image with a min-height:300px without adding the image as a background and make it as cover ? Because the image is being generated dynamically in which case allocating it to a particular css class wouldn't be easy.
There's no other better way around this:
img{/*but target to specific selector that you need*/
min-height: 300px;
max-width: 100%;
}
This produce the responsive result but when minimum height fits the requirement then this starts stretching.
One better solution is to use image as background and using css like this produce better experience with responsive image:
.cover-section{/*remove img inside this selector to use it as background*/
background: url(image-path.jpg) no-repeat center;
background-size: cover;/*don't forget to use vendor prefixes*/
min-height: 300px;
max-width: 100%;
}
You could always use media queries to handle CSS for mobile devices. Something like follows : (I've moved your img styling to a class 'cover')
.cover {
width:100%;
}
#media screen and (max-width: 500px) {
.cover {
min-height: 300px;
}
}
</style>
<section>
<div class="cover-section">
<img src="img/central-park.jpg" alt="" class="cover hoverZoomLink">
</div>
<div class="logo-section">
<div class="container postLeft hiddenClass visibleClass animated fadeInLeft">
<img src="img/logos/instagram.png" alt="">
</div>
</div>
</section>
Not sure if this is what you want.
Related
The selected logo should be visible enough.I have added media queries but not able to work it properly.The logo can be stretched width wise,but I don't know how to do that.
As of now I have done
<div class="row">
<div class="col-6">
<h3 class="eta m-0">Estimated Delivery Date</h3><br>
<h1 class="textFontAndColor">Friday 29, September</h1>
</div>
<div class="col-6">
<img src="https://cdn.worldvectorlogo.com/logos/united-states-postal-service.svg" class="fill"><br>
<span class="textFontAndColor">EZ00093838993N</span>
</div>
</div>
The image file itself has quite a lot of whitespace around it so if possible maybe using a wrapper div to crop it would help the situation.
The styling here might not work right away, but just by eyeballing I was able to throw something together that at least for me locally worked well enough.
<div class="col-6">
<div class="imgWrapper">
<img class="logo" alt="" src="https://cdn.worldvectorlogo.com/logos/united-states-postal-service.svg" class="fill">
</div>
</div>
.imgWrapper {
width: 400px;
height: 150px;
overflow: hidden;
}
.logo {
width: 300px;
height: 300px;
margin: -75px 0 0 -300px;
}
So the imgWrappers width and height controls the overall viewpoint thats to be shown and with logos width and height you can fix the logo image to be proper size and playing with margins get the position right.
you're using an incorrect media query syntax; the syntax for media queries is:
#media (min-width: 768px) {
selector {
property: value;
}
}
You may also simply provide the image with a unique class name, to avoid unnecessary complicated css selectors as the one you're using.
I have a dynamic page that has a carousel. I have no control of the images, because they are uploaded by the user. There are some guidelines, but I can't be sure that they are gonna follow them.
So, in my development tests, I have three images: a 100x100, a 2800x1500 and a 600x400
I want the carousel be in the middle of the page, and be responsive. I have no problem with that if I have more or less consistent images.
...
<div class="carousel-item active">
<div class="carousel-img">
<img src="img1.png">
</div>
</div>
<div class="carousel-item">
<div class="carousel-img">
<img src="img2.png">
</div>
</div>
<div class="carousel-item">
<div class="carousel-img">
<img src="img3.png">
</div>
</div>
...
The CSS for "carousel-img" currently (I have tried lots of combinations, and nothing seems to work) is:
.carousel-img {
height: 400px;
width: 100%;
overflow: hidden;
}
.carousel-img img {
height: 100%;
width: 100%;
object-fit: cover;
}
Now, the very large image, works as intended. It resizes not using more than 400px vertically. The problem is with the other two images. The smallest one, resizes from 100px to 400px vertically and up to around 400px vertically, it doesn't fills up horizontally, despite the 100%.
So how can I tell CSS to resize the images (without changing aspect ratio) to use 100% of the parent container. Let me try to explain better: if the carousel is inside a <div class="col-md-6">, it should use all the width and up to 400px.
Edit
Please accept my apologies to make everyone waste their time. There's no error in my original code. But there was a previous DIV before the carousel that read:
<div class="row justify-content-center">
I thought this might be no problem since it is intended to center the following DIVs, I don't know why but this justify-content-center prevented the images to resize appropriately, when I removed it, the images inside the carousel started working as intended.
Thank you very much to all who offered to help, today I learned something different.
Find a working snippet in this jsfiddle – this is using the carousel with indicators provided in the documentation and the image sizes you are considering.
The only changes you have to make is to remove your carousel-img div from your HTML, and change the .carousel-img rulesets in CSS to be applied to carousel-item instead:
...
<div class="carousel-item active">
<img src="img1.png">
</div>
<div class="carousel-item">
<img src="img2.png">
</div>
<div class="carousel-item">
<div class="carousel-img">
<img src="img3.png">
</div>
</div>
...
And the CSS:
.carousel-item {
height: 400px;
width: 100%;
overflow: hidden;
}
.carousel-item img {
height: 100%;
width: 100%;
object-fit: cover;
}
Have also removed the active class from all your items except the first as that would cause problems for Bootstrap JS to iterate through the slides.
You would have already got a first from me for using object-fit: cover from the start!
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;
}
}
I have an image which its size is 1050x700. I would place it in full screen when it is in desktop. the idea would be to place it when is in desktop version under the black bar in this way the image remain almost the same.
here it is the jsfiddle example http://jsfiddle.net/qLdp4czn/1/
in the mobile there is no problem because it fit the device display so it should back normal without placing it under the bar
here is the code:
<div class="container-fluid top-bar">
<div class="row-top">
<div id="central-block" class="text-center">
<p>Title</p>
</div>
</div>
</div>
<div class="img-background">
<img src="http://ppcdn.500px.org/75961441/84f7332982b9c76296fef33b528c7d6ddd22e5a0/5.jpg" alt="animal" class="img-responsive">
</div>
Put the image as a background-image instead and remove the img element:
.img-background {
background-image:url(http://ppcdn.500px.org/75961441/84f7332982b9c76296fef33b528c7d6ddd22e5a0/5.jpg);
background-repeat:no-repeat;
background-size:100% auto;
position:relative;
width:100%;
height:100%;
}
You might have to set the width and height of the element depending on your other CSS.