Hi here my problem and sorry in advance for the bad english it is not my native langagues.I'm doing a VB.net application and right now I'm doing a banner that goes on top. What i want is that she can resize automaticly for example if the customer minimize a bit the windows or narrow it. I want the image to goes smaller. Right now I've played with the width but it didn't seems to have done anything. It work for table but not for images.
Here the code for the Images:
.style2 {
width:auto;
}
I have accomplished it before using something like this:
.style2 {
width: 100%;
height: auto;
max-height: 400px;
}
(Change the value of 'max-height' to fit your image.)
This may have to be altered depending on your layout, and you may need to set certain restrictions on parent elements, but this works for me.
Related
I'm doing the first project for The Odin Project, which is recreating the Google home page. I think mine looks pretty good considering I've only been at this for a few weeks, but when I take my page out of fullscreen mode, a scrollbar appears. If you look at the Google homepage, The page itself resizes instead of using a scrollbar. Overflow:hidden obviously will just cut off the bottom of the page, so I don't want that. I'm sorry if I'm not being specific enough, but here's a link to my Github to check it out.
And if you see anything that I'm doing completely wrong or messy, I'd really love some criticism.
I haven't had a look at your GitHub, but I would suggest incorporating bootstrap, which basically lets you develop pages responsive to the screen size.
You might find this tutorial helpful:
https://www.w3schools.com/bootstrap/
After a quick look through your Github, you are setting a min-width: 500px to your all class which contans all your content. Try setting your all class width: 100% instead. This will allow your content to fill the page and adjust as the screen size adjusts.
Granted, once you get really small and content hits each-other they will break to other lines, but you would have to handle that with a media-query to adjust the size/scaling etc...
.all {
margin-left: auto;
margin-right: auto;
width: 100%;
}
Actually, all I had to do was remove all your .all styles to fix this issue. I also fixed your footer so it sticks to the bottom of the page. Finally, if you want to make the input size well, use media queries like so:
#media (max-width: 500px /* or whatever */) {
input {
width: 80%;
}
}
This will set the input's width to 80% at screen sizes 500px and smaller. Hre's a pen of what I changed: https://codepen.io/Hudson_Taylor11/pen/pemaoK?editors=0100
I am doing my first website and decided to use Bootstrap3. I've started to work over section with four 'feature' columns with one image per one of them. I am including link to my developer version of it:
http://tymekpudlik.github.io/kajtek/
In Chrome/Safari there is a problem that four image-icons (section where is a brain image) have much bigger height that they should have when we launch the site for the first time. When I open Chrome DevTools and click on css height property for image and enter one more time same, percentage value (90%), images are changing to correct size. Issue persists only for Chrome/Safari.
There is nothing special in css properties for image:
img {
display: block;
margin-left: auto;
margin-right: auto;
height: 90%;
width: 90%;
}
I'll really appreciate any help. Thanks!
Change stye of the parent element of that img (i.e div with class "feature text-center") as
height:auto; instead of height:100%;
This trick may help you..
I have these images in my webpage, that I want to automatically shrink when the viewport's width is reduced. I am using the following CSS to do this:
.autoResizeImage {
max-width: 100%;
height: auto;
width: auto;
}
The images which I want to resize are of two types:
Ones which are inside td's in a table
Ones which are not inside a table
On Chrome, images of both types shrink automatically when the viewport's width is reduced. However, on Firefox and Internet Explorer at least, this shrinking is only happening for the second type, and not for the first type (a scrollbar appears instead).
JSFiddle: http://jsfiddle.net/ahmadka/raSSq/2/
Notice that the small cell contained images do NOT resize in Firefox/IE, however the banner at the bottom DOES resize.
Can someone figure out what the issue is ?
Couple of things:
width:auto; will tend to make the image use its actual width, rather than stretching to fit a larger area. You should use width:100%;
Once your images are set to use 100% of the available area you also need to set your table to use 100% of the available area via width:100%;
Result:
.autoResizeImage {
max-width: 100%;
height: auto;
width: 100%;
}
.imageTable table {
width:100%;
}
This seems to work as a basic solution for me here: http://jsfiddle.net/5AYWd/1/
Also, if you want the images to stop growing at a certain point, that is when you'd use max-width. You might want to set a max-width on the table as well.
Something like this.
I'm currently working on a website. I noticed some elements are beeing cut off, if viewed in Firefox. I attached an Image, showing the problem.
The image below is a jsfiddle Screenshot from Firefox.
The code reproducing it is located here: JSFIDDLE
It's just an image, with an percantage value set with CSS.
.image-percent {
width: 30%;
}
The weird thing is, sometimes I am able to reproduce the bug and sometimes it simply vanishes after adding random HTML-Elements or other CSS-Properties.
Anyone already experiences this behaviour or know a workaround, forcing Firefox to resize the image the right way?
Actually found the solution in this thread Firefox blurs an image when scaled through external CSS or inline style.
Firefox implemented non-standart css property image-rendering https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
Playing with different values this solution gives more or less appropriate result:
image-rendering:optimizeQuality;
http://jsfiddle.net/jGKkB/
You need to add the max-width property. this should fix it.
.image-percent {
width: 30%;
max-width: 100%;
}
Just for testing. try this:
.image-percent {
max-width: 100%;
height: auto;
width: auto;
}
Hope that's it.
Basically, your image resolution is very high and you are trying to display it in 30% width.
So your image's pixels is not showing properly. Whenever you show the large image to small or small image to large this will be happened.
You can create an another image with desired width.
I'm making a small website and I'm very new to CSS but whenever I change the size of the webpage I'm working on nothing stays relative to the size of the screen it's being displayed on. For example, I have text on the right, if I increase my browser size by maximising the text on the right stays in place and is now in the centre of the browser.
One of my images is moving with the webpage size being increased and decreased by dragging the corner of the browser. I use the same CSS code for that image on my hyperlinks list, text box or text in general and it doesn't work at all.
I've researched high and low, I've found some stuff on it but nothing seems to work. I'm getting so frustrated, my site is also local so I cannot even share the link. If anyone doesn't understand what I mean I'll try re-explain it's just quite hard to explain the issue.
Code that works for the image:
img {
padding-top:50px;
display: block;
margin-left: auto;
margin-right: auto;
}
Also, I want to move the hyperlinks to the top left, not have them auto assigned if that makes a difference and I cannot touch the HTML code either, just the CSS. (I'm doing a CSS test to see if I'm able to replicate an image of a webpage already done. I'm not doing this as part of coursework or a test at college/uni, I'm a student but I'm on work placement as a software engineer, this is part time homework for me to self-learn).
you can use the percent notation
for example :
img {
padding-top:50px;
display: block;
margin-left: 10%;
}