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>
Related
I have css that should make the div margin go to 10% if the screen is 1920px wide or less, and 20% margin-left if the screen width is any higher. For some reason though, the media query is not working. Here is the code for it. Thanks!
.about-me-header{
width: 200px;
margin-left: 20%;
height: 20%;
}
#media only screen and (max-width:1920){
.about-me-header{
margin-left: 10%;
}
}
You must specify the type of length. Like 1920px
#media only screen and (max-width:1920px){
.about-me-header{
margin-left: 10%;
}
}
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 some images on my webpage. I originally put their sizes in pixels, e.g.:
<IMG src="image.png" width=700px height=100px>
When I used different machines with different screen resolutions, sometimes the page didn't look like I wanted it to.
I then switched to set the dimensions using percentages rather than pixels, e.g.:
<div class="logo_container">
<IMG src="image.png">
</div>
and
.logo_container img {
padding: 15px;
width: 37%;
position: relative;
}
The page now looks how I want it, but if I start to resize my browser window, the images shrink (whilst maintaining aspect ratio). I don't want this to happen.
I want the web page to look correct when the browser is full screen, but then I don't want images to shrink.
Thank you.
You should change the css based on the screen width:
<div class="logo_container">
<IMG src="image.png">
</div>
<style>
#media screen and (max-width: 540px) {
.logo_container img {
padding: 15px;
width: 100%;
position: relative;
}
}
#media screen and (min-width: 540px) and (max-width: 780px) {
.logo_container img {
padding: 15px;
width: 50%;
position: relative;
}
}
#media screen and (min-width: 780px) {
.logo_container img {
padding: 15px;
width: 30%;
position: relative;
}
}
</style>
Use em.
<img src="" alt="">
CSS:
.logo_container img {
width: 1em;
}
em is constant between all devices - it is always the same size in real life: see https://www.w3schools.com/cssref/css_units.asp for more info.
Just set the width of the image to a fixed amount of pixels:
.logo_container img {
width: 200px;
}
On http://www.rosstheexplorer.com/picture-test/ I have two images side by side. The two images have different height to width ratios. I wanted both images to have the same height so gave the images different widths. I used the padding bottom hack to get the images height and width to always stay proportional.
To do this I added the following to the CSS file
.wrapper-133percent-grampians {
width: 33.9%;
float: left;}
.wrapper-75percent-grampians {
width: 60.1%;
float: left;
}
.wrapper-133percent-grampians .inner {
position: relative;
padding-bottom: 133%;
height: 0;
}
.wrapper-75percent-grampians .inner {
position: relative;
padding-bottom: 75%;
height: 0;
}
.element-to-stretch-grampians {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
The HTML code is as follows
<div class="wrapper-133percent-grampians" style="min-width: 172px;">
<div class="inner"><img class="element-to-stretch-grampians alignleft" src="http://www.rosstheexplorer.com/wp-content/uploads/2016/05/venus-baths-test2-225x300.jpg" alt="venus baths test2" /></div>
</div>
<div class="wrapper-75percent-grampians" style="min-width:172px;" >
<div class="inner"><img class="element-to-stretch-grampians alignnone" src="http://www.rosstheexplorer.com/wp-content/uploads/2016/05/IMGP0038-300x225.jpg" alt="IMGP0038" /></div>
</div>
I have the 'min:width:172px' statement because I wanted the two images to appear on top of each other when being displayed on mobile devices. When the images were being displayed side by side on mobile devices the images were too small.
When the images appear on top of each other they are 172px wide, yet the width of the mobile browser could be larger than 172px. I do not want to have white space on the mobile browser. How can I instruct the images to occupy the full width of the device WHEN the two images move onto separate lines.
Thank You
This is because you have defined the width as 33% here
.wrapper-133percent-grampians {
width: 33.9%;
float: left;
}
Now I understand that you want the width to be 33% for desktop PC. But the same is being applied to mobile as well. You can separate both by defining different sized for different screen sizes
//for desktop applications
#media screen and (max-width: 499px) {
.wrapper-133percent-grampians {
width: 80%;
float: left;
}
}
//for mobile devices
#media screen and (min-width: 500px) {
.wrapper-133percent-grampians {
width: 33.9%;
float: left;
}
}
I'm fairly new to responsive web design, so don't beat me up too badly.
I have a currently fixed-width gallery page that is 1000px wide. The 1000px outer div has 30px padding and 30px between each pair of images. So I've got 910px of space available for each pair. The page might look like this:
(30px spacing)(500px img)(30px spacing)(410px image)(30px spacing)
(30px spacing)(480px img)(30px spacing)(430px image)(30px spacing)
(30px spacing)(450px img)(30px spacing)(440px image)(30px spacing)
...etc.
I'd like to convert it to a responsive page so that the images scale down as the browser window shrinks and ultimately stack on top of each other once the browser window drops below 640px.
The only way I know to make this 640px change is inside a stylesheet. Is this the only way I can do this? Am I going to have to define styles within the stylesheet for every image?
For example, for a 480px wide image:
img.img480 {
width: 48%;
float: left;
}
#media screen and (max-width: 640px) {
img.img480 {
width: 100%;
max-width: 480px;
float: none;
}
}
Here is an example of the effect you're asking for with responsive design.
A couple things to note:
margins are bad, use padding and wrappers instead
floats are bad, use inline-block instead
(Demo)
html, body {
margin: 0;
}
.wrapper {
padding: 0 15px;
font-size: 0;
}
.img-wrp {
width: 50%;
padding: 0 15px;
display: inline-block;
box-sizing: border-box;
}
.img-wrp img {
width: 100%;
}
#media screen and (max-width: 640px) {
.img-wrp {
width: 100%;
}
}
<div class="wrapper">
<i class="img-wrp"><img src="//lorempixel.com/640/480" /></i>
<i class="img-wrp"><img src="//lorempixel.com/640/480" /></i>
</div>