I have different image sizes in a div in a bootstrap carousel. It is either landscape or portrait images and if I set the width to be 100% the landscape images become perfect but the portraits to high.
And if I set max-hight to it the lanscape images doesn't become full width.
Link to Wep-page
CSS:
.case-box {
margin-bottom: 1.5em;
display: flex;
width: 100%;
height: 420px;
align-items: center;
justify-content: start;
}
#media (min-width: 768px)
.case-box {
height: 428px;
}
#media (min-width: 1280px)
.case-box {
height: 540px;
}
.case-img {
width: auto;
max-height: 100%;
}
Why don't you use Bootstrap 4 class .img-fluid for making images responsive (.img-responsive for Bootstrap 3)?
Set your images with css:
max-width: 100%;
max-height: 100%;
It should adapt them correctly no matter the height of width.
Solved it by creating images within a white frame, so they all have the same width and height.. Simple but not the best.
Related
I wanna make a image responsive but only till to an specific width of the screen. Say if the user starts from 300px width to enlarge the screen the image should be responsive and should grow with the screen width. Once a width of 1440 px is achieved the image should stop with adapting the scale. Imagine a image in the following code
<style>
.left-main {
flex: 30%;
background-color: #ffffff;
}
.icon-position{
margin-top: 200px;
margin-left: 33.195%;
width: 61%;
height: auto;
}
</style>
<div class = "left-main">
<img src="images/Developer_Icon.svg" class="icon-position" width="178" height="180">
</div>
At an specific display width the image should stop to be "responsive" and should hold the last size which the image had. How can I do that?
You can use max-width css property. Documentation
.icon-position{
margin-top: 200px;
margin-left: 33.195%;
width: 61%;
height: auto;
max-width: 1400px; // anyvalue here
}
.image-position{
max-width: Enter width of your choice here;
}
Max width in css is used to define the maximum width an element can have. The element will stop becoming wider after the max-width is achieved.
Thanks😊
You can use two ways. First, check what is width of image in specific window width and then use this:
#media screen and (min-width: 1440px) {
.image {
width: 600px; //define image width
//here set all other parameters, fixed position etc.
}
}
Second way is to use JavaScript. When window is in needed width then get image's width and write it into style. If you need, I can add JS code for this.
<style>
.left-main {
flex: 30%;
background-color: #ffffff;
}
.icon-position{
margin-top: 200px;
margin-left: 33.195%;
width: 61%;
height: auto;
}
#media screen and (min-width: 1440px) {
.icon-position {
width: 700px; /*Instead of width: 700px, you can define you own desired width of the image, after 1440px screen size.*/
}
</style>
<div class="left-main">
<img src="images/Developer_Icon.svg" class="icon-position" width="178" height="180">
</div>
How do I setup HTML/CSS to have my DIV follow the screen size for width, but stop expanding once it fits the contents (it should scroll left/right when the div cannot fully contain the contents).
Pseudo-Code:
HTML:
<div class="image-container">
<img width="1000">
</div>
CSS:
.image-container {
/* ??? */
display: inline-block; /* ??? */
overflow: auto;
}
EDIT: Per Evadore's answer, I was able to come up with the following CSS.
.image-container {
display: inline-block;
overflow: auto;
}
/* optimize these px dimensions, 900 worked for my application */
#media (max-width: 900px) {
.image-container {
max-width: 710px;
}
}
/* redundant, I plan to tweak this range later */
#media (min-width: 901px) and (max-width: 1575px) {
.image-container {
max-width: 710px;
}
}
#media (min-width: 1576px) {
.image-container {
max-width: 1385px;
}
}
The following reference also helped: w3schools
Use CSS Media queries to setup for various screen sizes.
view source code of this page to see how media queries were used.
for this set the parent div width to fit-content and max-width to 100%. now the parent div will remain between the width of the content and the with of the screen if the screen size is not enough. And lastly for scrolling inside the parent div on the small screen devices put overflow:scroll.
Here is the Codepen demo
.parent {
background-color: green;
width: fit-content;
max-width: 100%;
overflow: scroll;
}
.child {
padding: 30px;
width: 700px;
background-color: red;
color: #fff;
}
<div class="parent">
<div class="child">
test string
</div>
</div>
ps: I've added bg colors just for reference purposes, to show whether the parent component is expanding or not.
I have modal that displays images. I set height of image in modal on 90% and width automaticly scales with it, so image is not stretched. But on the mobile phone I want the height to not be defined and I want to define only width to 100%. How do I make height of the image on small screen not defined? till now I have this code:
.image {
height: 80%;
}
#media only screen and (max-width: 700px){
.image {
width: 100%;
/* make height not defined?!
}
}
Use height: auto; in mobile screens.
#media only screen and (max-width: 700px){
.image {
width: 100%;
height: auto;
}
}
#media only screen and (max-width: 700px){
.image {
width: 100%;
height: auto;
}
}
What I'm working with now http://pastebin.com/3CSs2tCA
You can paste it in here. http://htmledit.squarefree.com/
In Firefox, if the window is less than 786px wide, the logo gets smaller and keeps its ratio. In Chrome (and my phone), the image keeps its height and gets squished skinny. No idea what to change to fix it.
Thank you to a kind person on Freenode's #css channel for the answer.
Old code:
#media only screen and (max-width: 786px) {
#logo {
vertical-align: middle;
display: table-cell;
height: 100%;
width: 100%;
min-width: 75px;
min-height: 75px;
}
changed height to max-height: 100%, and width to auto.
#media only screen and (max-width: 786px) {
#logo {
vertical-align: middle;
display: table-cell;
max-height: 100%;
width: auto;
min-width: 75px;
min-height: 75px;
}
One of my questions about applying float to resizable images was answered by Gasim (thankyou) but I still have one more problem to fix.
I have two images which have this css code applied to them...
.image-container {
display: inline-block;
width: 100%;
background-size: cover;
background-position: center;
background-image: url(Images/Filler2.png);
height: 250px;
margin-right: auto;
margin-left: auto;
}
#media only screen and (min-width : 1200px) {
.image-container {
max-width: 500px;
}
}
.image-container2 {
display: inline-block;
width: 100%;
background-size: cover;
background-position: center;
background-image: url(Images/Filler3.png);
height: 250px;
margin-right: auto;
margin-left: auto;
}
#media only screen and (min-width : 1200px) {
.image-container2 {
max-width: 500px;
}
}
So now they're resizing correctly and aligned next to one another, I am unable to position them horizontally like my example below. I have tried the only way I know how to do this (margin-left: auto , margin-right:auto) but this didn't work. Also padding isn't working? Is there some part of this code which prevents these both from working and if so what do I need to fix it?
Any input if helpful thanks :)
Maybe this is not the best solution for responsive images, but I generally use media queries with a mobile first approach and it has been working out great. Basically, you set the boxes' widths to 100% by default and on larger screens you set the width that you want:
.image-container {
float: left;
width: 100%;
background-size: cover;
background-position: center center;
background-color: red; /* for testing */
height: 250px;
}
#media only screen and (min-width : 1224px) {
.image-container {
max-width: 500px;
}
}
Here is the result: http://codepen.io/gasim/pen/xbYQdd
Try to make the window size smaller and you will see the difference. It is much simpler to test, debug, and modify this code.
EDIT: Forgot to mention. If you can also use display: inline-block instead of floats.
EDIT 2: To add padding between containers you need to add margin to a specific value, not auto. For example:
.image-container {
/* rest of the values */
margin: 5px;
}
This will add 5px margin to left, right, top, and bottom of the image container. If you want to have center the image containers also, I would add them in another container:
<div class="container">
<div class="image-container" style="background-image: url(URL_HERE);"></div>
<div class="image-container" style="background-image: url(URL_HERE);"></div>
</div>
and add the styles:
#media only screen and (min-width: 1224px) {
.container {
width: 80%;
margin: 0 auto;
}
}
Also, please check out the way I added the background images, using styles. It is much cleaner than writing CSS for each background image. That way you can have one class image-container and just add as many background-images without relying on CSS.