I have a web project, how do I make the images on my website responsive in any display? Will this is my code is produce an error?
html code
<img src="image/Al-Khawarizmi.jpeg" class="img-load">
css code
#media screen and (max-width: 750px) {
.img-load {
width: 100%;
height: auto;
}
}
You have a few options when it comes to making your image responsive.
With the current settings you have of width: 100% and height: auto, your image is already responsive without the media query.
Your image is not longer responsive if you start using px as a unit of measure for your height and width.
You do haven't need to #media, if you want image width to cover the entire page width, in any device. only:
HTML:
<img src="image/Al-Khawarizmi.jpeg" class="img-load">
CSS:
.img-load{
width:100%;
}
You must use #media, only when you want your image to have different widths in any device.
For example, if you want the width of an image to be 50% on the large screen, and 100% on the smaller screen, you can set:
CSS:
.img-load{
height: auto;
}
#media screen and (max-width: 750px) {
.img-load{
width:100%;
}
}
#media screen and (max-width: 1200px) {
.img-load{
width:50%;
}
}
Related
I have created a website and there is an image (640x640px) but on mobile you have to side scroll in order to see the full picture. Does anyone know how I could change the size on mobile but make it stay the same on desktop?
this is what i have so far
<pre>
<div>
<img style="object-fit: scale-down;" src="gifs/preview.gif">
</div>
You want to use:
img {
max-width: 100%;
}
so what you can do fir this is to give the image a classname and then use that classname within a #media query
#media only screen and (max-width: 600px) {
.classname {
width: 200px;
height: 200px;
background-size: 100% 100%;
}
}
and then give it whatever size you feel works best for that size you want to achieve
try incorporating #media queries into you css file. It will look as follows:
#media only screen and (max-width: 600px) {
img {
width: 50%;
}
}
So in the above code we are creating an at media query which will trigger when the screen is less than or equal to 600px, then the following will happen, which in this case, is it will take only 50% of the parent div.
Here is a resource if you still do not understand: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Hope this makes sense :D
Good afternoon, I am making a page layout using tables on HTML, but there's an issue that I'm stuck with. One of the instructions is that the images resizes according to the screen size, but I'm not allowed to use JS or CSS, only HTML. I have an idea on how to do it with CSS, but I'm not allowed to use it.
What I've tried until now is:
<td width="35%" height="10%"><img src="https://blog.udacity.com/wp-content/uploads/2020/06/HTML_Blog-scaled.jpeg" width=100% height=100%></td>
The problem is that the height in the <td> doesn't seem to change anything. The goal is that the image proportionally resizes, not getting like too thin or too large depending on the screen size.
For Mobile
#media screen and (max-width: 540px) {
img {
width: 50px;
height : 50px;
}
}
For Tablets
#media screen and (min-width: 540px) and (max-width: 780px) {
img {
width: 80px;
height : 80px;
}
}
I have a page with styles:
.container {
width: 100%;
height: 100vh;
min-width: 1920px;
min-height: 1080px;
}
The page does not fit on a small screen (eg 1280x720) and scrolling appears.
How do I fit a page on any screen in width? That is, I need something to zoom. I tried to use viewport but it only work for mobile screen but not on a PC.
html, body{
height:100%;
}
body{
min-height:100%;
}
Does this be not working on pc monitor? BTW it does looks like that it needs for javascript to sum and stretch the size.
#media screen and (max-width: 1920px){
.container{transform: scale(.8);}
}
#media screen and (max-width: 1024px){
.container{transform: scale(.6);}
}
This question already exists:
HTML desktop and mobile [closed]
Closed 3 years ago.
https://jsfiddle.net/5d401nso/1/
#mobileview{
/*background-image:url("");
background-size:100% 100%;*/
width:auto;
height:auto;
}
#media(max-width: 768px){
#mobileview{
width:411px;
height:411px;
}
}
#media(max-width: 500px){
#mobileview{
width:411px;
height:411px;
}
}
Above is the jsfiddle that i have created.
Current Problem: Not Supporting Mobile View and looking a ways to
change the text and button alignment from center to "left" when in
mobile view
Solution That i wanted: When in mobile view ( max width 768px or 500px ), the text and button will align to left side instead of center.
Put p { text-align: left } inside your #media {} at whatever breakpoint you want it to happen. However small tipp. To make it even more responsive give your image a max-width instead of a static width, so your image will resize whenever your screen does. Also note you have the exact settings for 500 and 700px. If you say #media(max-width: 700px) it will apply to every thing wich is smaller than 700px. You don't need to define 500px if your want 500px down. If you want something to happen within 500px and 700px us (min-width: 500px) and (max-width: 700px)
#media(max-width: 500px){
#mobileview{
max-width: 100%;
height: auto;
}
p {
text-align: left;
}
}
I give my div elements sizes in % because I want them to be able to adapt to different screen sizes of different devices. I however want the size to be constant for a device. For example if a div is 60% in width of my laptop browser screen it should stay 60% even when I minimize size of my browser window.
How do I achieve this?
You are probally looking for
min-width: 800px;
If the width gets under 800px now the div wont resize smaller and just stay at this width.
Just make sure you add a media query like this:
div{
width: 60%;
}
#media (min-width: 601px) {
div{
min-width: 800px;
}
}
#media (max-width: 600px) {
div{
min-width: 400px;
}
}
Using % you can make the div adaptive, but inside side the div if there any image or fixed width elements it will not be adaptive, you need to make them adaptive using media queries
ex:
/* Small Mobile Devices ( < 768px ) Style Begin */
#media (min-width: 0px) and (max-width: 767px) {
.div-elements-name {
width:100%;
}
}