I want to resize widescreen/highscreen images proportionally so they fit a square-thumbnail-div and don't become distorted.
I tried it this way in my stylesheet:
.PicsNav img {
max-width: 74;
height: auto;
max-height:74;
width:auto;}
Works fine in both Chrome and Safari but Firefox doesn't handle it correctly. The Pics won't be resized - instead they are shown in full size one above the other.
You'll have to add a unit when setting a width and height. I'm guessing you want 74 pixels?
.PicsNav img {
max-width: 74px;
height: auto;
max-height:74px;
width:auto;
}
Related
Okay beginner here- trying to get this site to look good no matter what screen size.
This is the site page that works no matter the screen size:
https://jsfiddle.net/garixakor/j0xck25v/1/
I tried to center one of the paragraphs so it looks better in desktop view and when I do the text no longer fits neatly in phone size or when making the desktop browser smaller.
P.blocktext {
margin-left: auto;
margin-right: auto;
width: 20em
}
<p class="blocktext">Step back in time etc etc....
This change is shown in this fiddle:
https://jsfiddle.net/garixakor/5Lo4rtkc/
I am wondering if using media queries as in: if the screen size is the screen is 992x or more the centering is applied is possible or if there are other solutions or if I need to find a way around centering in this manner.
Try adding max-width: 100%. With just your width value if the screen width gets smaller than 20em the text container will flow outside the viewport and not wrap the text.
By setting max-width to 100% it makes sure that the text container cant be wider than the parent container.
P.blocktext {
margin-left: auto;
margin-right: auto;
width: 20em;
max-width: 100%;
}
P.para {
margin-left: auto;
margin-right: auto;
width: 70em;
max-width: 100%;
}
I get this vertical white line on the right side of my page.
it's only happening on mobile. found it using device tool bar: https://jood19.sg-host.com/
I designed the website "mobile-first". only used media queries for desktop.
I've tried, without success, the following code
html body{
width: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
can you recommend something?
It's because your image has a set width which happens to be wider than the mobile screen.
You can keep the set width if you add a max-width to the image. This will mean it will be the same size as you originally had except for when the screen is too small for that and then it will take up the full width.
.about-section img {
width: 28rem;
max-width: 100%;
}
Setting your .about-section img on the dev tools seem to remove the whitespace. Tried with 21 rem on mobile screens.
.about-section img {
width: 21rem;
}
I am using Owl Carousel for image slider . The issue is I want all of my images in a square shape containers (Single container for each image)
I can resolve this issue with
width:100%; height:auto
But the problem occurs when I use different resolution of images. Each image can have different resolution but still I want all the images to be shown as
300x300 or 400x400 on big screens and responsive so after
I don't think forcing the size is the best way to solve this, it depends on what you want to manipulate, is it the height or width?
#editedWidth {
max-width: 100%;
width: auto;
height: 300px;
}
#editedHeight {
max-width: 100%;
width: 300px;
height: auto;
}
Link to CODEPEN
You can use background-size: cover - http://codepen.io/bluminethemes/pen/Yqobgx
if you want to be your image responsive then you should your image with square resolution because if you use rectangle type image then it will re-size according to original resolution
I'm making a few HTML pages specifically for iPad Air and iPad Mini. The pages will have few larges images, for example of the size of 1600x300. But as per the code which was written by me the images are too big to be on the screen, it goes beyond the screen while testing in Windows browsers. Code as shown below:
<div class="wrapper">
<div class="image1"></div>
<div class="image2"></div>
</div>
.wrapper {
width: 100%;
height: 100%
}
.image1 {
width: 1600px;
height: 300px;
top: 100px;
left: 100px
}
.image2 {
width: 1700px;
height: 300px;
top: 450px;
left: 100px
}
The width and height of div are set the same as width and height of the image. The images size were specifically designed for iPad, I can't change the size.
If I give the actual resolution of iPad for .wrapper as shown below the images will get positioned correctly when I test I the browser setting the screen size to 1024x768 (logical resolution of iPad).
.wrapper {
width: 2048px;
height: 1536px
}
I want the image to adapt to all screen as well as iPad by giving 100% width and height to wrapper class so that even in the portrait mode of iPad I can view it without any fluctuations. Please tell me how to achieve this.
Thanks
OP hasn't clarified why they're using DIVs. Maybe there's going to be content laid over it? Until OP provides clarification I'm going to provide the standard responsive image solution.
If you don't have to use DIVs, try this:
<img src="http://placehold.it/1600x300">
<img src="http://placehold.it/1600x300">
img {
display: block;
max-width: 100%;
}
jsFiddle: http://jsfiddle.net/rwzn2db6/
UPDATE
Note: I cannot tell if you're also looking for a 100% height option or just need the widths to be a 100% width and scale.
If you'd like to use DIVs you could use background-size: cover along with the appropriate amount of padding-bottom for each image DIV. The padding on the bottom of the DIV is based on the image's height to width ratio expressed as a percentage.
<div class="container">
<div class="img-1"></div>
<div class="img-2"></div>
</div>
.container > div {
background-size: contain;
}
.img-1 {
background: url('http://placehold.it/1600x300/') no-repeat;
padding-bottom: 18.75%; /* 300/1600 * 100 = 18.75 */
}
.img-2 {
background: url('http://placehold.it/1600x300') no-repeat;
padding-bottom: 25%; /* 400/1600 * 100 = 25 */
}
jsFiddle: http://jsfiddle.net/5kjtdhmn/
Either of the solutions offered above may not be a 100% what you're looking for as it is hard to tell what the proper context and final objective is.
Add max-width: 100% and height:auto to your images
May be you need to adjust size (width-height) of pages according to the device, so you might need the following tag added to your section of your HTML.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
......
......
content="width=device-width" will adjust screen resolution automatically'initial-scale' value used to set zoom level of page.
First of all, what's with people saying stuff isn't an answer? Expecially when it is? Wtf.
Second of all, another acceptable answer on top of what was already said by DigitalDouble, would be to set the image to have the
Background-size:cover; and set the image with css background-image property.
I would remove the pixel sizes entierly and just set it to 100% width and height, with position Absolute to be able to lay other content on top of it.
I have some images that I want to add to my web(the image width should be as the screen width). the problem is that there are a lot of screen which means that there is a different between each one to another screen size/resolution. I tried to set the image width to 100% but in some cases it works great and in some case it distort it. Someone can please tell me the solution to this problem?
Set the img CSS to width: 100%; height: auto;
img {
width: 100%;
hegiht: auto;
}
DEMO