I hava A image in a slider.
it is responsive but the image is to big.
How can i resize it? (but it has to stay responsive)
<img src="switch/3.jpg" class="homeImg">
.homeImg{
width: 100%;
}
You can try using width: 100%; height: auto;. This literally means: set the width of the image to 100% of the page width and maintain its aspect ratio.
Related
I have been reading stack overflow for some time but this is my first post!
I have this website: https://oliv-collection.com/.
The banner on top is full width as long as the screen you view it with has a resolution of less than 1600px (the original picture width). Once the resolution is greater than that, the banner does not cover the entire width of the page.
Is there an easy way with CSS to make the width and height increase so as to cover the full width? I have been fighting with Google Inspector but can't figure out what to do!
Thanks
There might be better ways to do this, but I managed something close to what you ask for by changing the styling of the banner images to the following:
.slick-slider .nm-banner img, .nm-banner img {
display: inline-block;
width: 100%;
}
What I did was replace width: auto; to width: 100% to make the image resize correctly, and remove max-width: 100%; and height: auto;. With my change, the banner image will increase with the width of the screen even above 1600px. This works for me in Safari on macOS.
You should use
width: 100%;
Whatever the width of the screen is, the banner will be with maximum width.
Set the margin of the HTML body in CSS to 0.
body {margin: 0;}
I am getting a bunch of image URLs and I am displaying them in my webpage. By default I set all the images to have <img height = "200px" width = "200px">
The issue with this is that some images don't scale and look squished, how do I dynamically scale each image so that it doesn't look squished but is smaller. For example if I have a picture that is 16:9 I'd like it to keep that ratio when making it smaller.
So, you want an image to have width and height of 200px, while maintaining aspect ratio.
If you set height and width in html, it will lead to image not maintaining the aspect ratio.
Instead use CSS.
<img class="myImg" />
In styles.css
.myImg {
max-width: 200px;
max-height: 200px;
}
I have few pages where I have included a background image with width 100% and height 100% in every page. That means whenever a page is loaded you'll see an image with 100% screen's size. Everything is perfect when I see these pages in my laptop. I'm facing problems when I view them in mobile screens.
I just want to know how do everyone deal in these situations. I mean how to make changes to my main div with width and height 100% in responsive screens?
The image is getting stretched if I set the background size to 100%.
Some part of the image is cut if I set the background size to contain.
I want the image's clarity should be perfect. Should I make the width of the main div to auto? Or else should I change the image in responsive screens?
Is there anyway to make this div look better in small screens?
I just want my main div to be apt in Responsive screens.
It shouldn't look line there is a defect in the image or in my code.
Here's my code of the main div :
html,
body {
width: 100%;
height: 100%;
}
.main-div {
width: 100%;
height: 100%;
background-image: url('http://vignette4.wikia.nocookie.net/marveldatabase/images/8/8c/Wolverine_Vol_3_73_Variant_Frame_Textless.jpg/revision/latest?cb=20090925123509');
}
<div class="main-div">
</div>
There are many options to make image responsive. Please Google out the approach that best suits your requirement. The solution which you will find helpful depends on the image that you are using. It depends on the size and quality of image.
I find the following links helpful.
https://www.w3schools.com/css/css_rwd_images.asp
https://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp
For Responsive Image
.class_name{
max-width: 100%,
height: auto,
display:block
}
And Full Screen Responsive Image use individual class like
.class_name{
background-image: url(image path) ;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #999;
}
html,
body {
max-width: 2000px;
min-width: 100px;
height: auto;
}
.main-div {
width: 100%;
height: 100%;
background-image: url('http://vignette4.wikia.nocookie.net/marveldatabase/images/8/8c/Wolverine_Vol_3_73_Variant_Frame_Textless.jpg/revision/latest?cb=20090925123509');
}
<div class="main-div">
</div>
this should make it responsive. I don't know what you want the DIV to be like, so I left that alone.
I'm trying to make my background image on my splash page resize to smaller sizes. I want the image to cover the entire section whatever size screen it may be.
.splash{
background-image: url("../images/lanternboys_medium.jpg");
background-size: cover;
height: 100vh;
width: 100%;
margin: 0;
padding-bottom: 40px;}
When I view this on my ipad the picture is huge! I've read that others have tried removing the height and width and set background size as "contain" but it doesn't stretch to what I want without the "cover" function.
The current size of the picture is 1366x911 but I do have a larger size of 5184x3456.
Any tips would be greatly appreciated!
Most of the time, vw and vh units doesn't work properly on iOS devices. Maybe if you set your background height to 100% and the background width to auto? Since your height is smaller than the width, it should do the trick.
I have an image in a website (the website is responsive). the image should always have 100% height of the parent div (that has a height of 100%) but with aspect ratio.
my example
I tried with CSS:
max-height: 100%;
max-width: 100%;
width: auto!important;
But this way the picture has always 100% height of it's original size. I want it bigger than it's original size, but with aspect ratio.
Change the CSS to:
height: 100%;
display: block;
float: right;
By removing all width references, most if not all browsers will scale it proportionally and keep the aspect ratio. By specifying the height as 100%, it will fit the height of the image to the height of the parent container and stay responsive.
Have you considered changing your CSS to the following?
img{width:100%; height:auto;}
That way all of your images will respond to the width of their parent element and keep their aspect ratio
Use the CSS tags "width" and "height" to make it bigger. For example:
width: 200%;
height: 200%;
Good luck!
*Fiddle Demo