Hi i searched it a lot but i cannot find any solution.
Actually I want to have image for every HTML section. and it should be responsive.
here is my code
<section id="portfolio">
</section>
<section class="success">
</section>
and CSS
#portfolio {
background: url(../img/STS_247650163-Web.jpg);
background-size: cover;
height:400px;
}
.success {
background: url(../img/success.jpg);
background-size: cover;
height:1100px;
}
now if I remove height the images disappear and if add them the images becomes big and ugly.
i tried.. different method but nothing is working
thank you
You have two ways to make responsive images.
Use bootstrap- .img-responsive
use custom media queries -
#media screen and (max-width: 368px) {
img.yourclass{
min-height: 150px or auto;
}
}
Better use bootstrap for your divs or section, try this -
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Image</h2>
<p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
<img class="img-responsive" src="http://placehold.it/350x150" alt="Chania" width="460" height="345">
</div>
</body>
</html>
Related
I want to be able to resize and center my logo image (which is currently taking up the whole page on preview) but I've tried so many different ways of resizing including adding display: block to the CSS and nothing at all happens. What am I missing??
Besides the standard beginning of HTML file this is all I have in my HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Home Page</title>
</head>
<body>
<div class="logo">
<img src="images/logo.png" alt="Stuff logo">
</div>
<div class="button">
<button type="button">Home</button>
<button type=button>Contact</button>
</div>
</body>
</html>
This is the only things I have in my css file:
body {
margin: 0 auto;
}
.logo {
max-width: 200px;
max-height: 200px;
}
.button {
border: 3px solid green;
}
sir here is final answer
sir you had given the class logo to the not to the img
so you have add class to the img not to the
if css you have just do this
<div class="logo">
<img src="https://image.shutterstock.com/image-photo/mountains-under-mist-morning-amazing-260nw-1725825019.jpg" alt="Plants and Things logo">
here is css
.logo img {
max-width:20px;
}
this will work
There are few region behind it
for example
you didn't link the css file with html file.
size of your logo may be smaller then max-size
but as solution i would suggest you to use the css in the img for the temporary solution
like this
try to change with this
<img class="logo" src="images/logo.png" alt="Plants and Things logo" style="max-width: 20px;max-height:20px">
also by using the
body{
background-color:red;
}
you can check that your css file is linked or not
also check the console errors
I have some divs arranged in a way so that there are two columns, and a box that overlaps between them. For reasons I can't figure out, the div extends just slightly past the page width, causing a horizontal scroll bar to appear (which is bad).
Additionally, the left most div extends below the background image of the parent div, which should not be possible.
Why are these divs not lining up neatly?
My HTML code is below. I am not using a snippet as the snippet shows the output in responsive mode which does not demonstrate the issue. I know that inline CSS is advised against, and it is only used for the purpose of this question.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Demo Page</title>
</head>
<body class="d-flex flex-column h-100">
<div style="height:500px;background-image:url(https://www.w3schools.com/howto/img_parallax.jpg);background-position:center;background-size:cover;">
<div class="row pb-3" style="height: 520px; position:relative;">
<div class="p-3" style="position:absolute; background:white; top:100px; height:220px; width:400px; z-index: 2;">
<h1>Text to overlap here</h1></div>
<div class="col-md-3" style="background:grey;"> </div>
<div class="col-md-9" > </div>
</div>
</div>
</body>
</html>
Just add to row with class pb-3
.pb-3{
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
You can also add to div with class p-3
.p-3{
max-width: 100%;
}
Avoid using "height" and use min-height /max-height instead.
I'm familiar with html/css, but while experimenting with background-image:url(), nothing shows up. My html is very basic to test this out; my image path name is correct. I've exhausted all my resources and nothing is working.
Here is my html:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="test.css"/>
</head>
<body>
<img class="pic">
</body>
</html>
CSS:
.pic {
background-image: url(/Users/leslienguyen/Desktop/bgBullet4.png);
background-size: cover;
}
I've already tried using (-webkit-)background-size, background-attachment, and checked if the files are all in the same location. The background sometimes works when I put height specific px but never works with auto either. I'm super stuck.
Thanks!
You must have a width height for your pic. I used a random image below for the purposes of running the code.
.pic {
width:100%;
height:100vh;
background-image: url('https://image.shutterstock.com/image-photo/white-transparent-leaf-on-mirror-260nw-1029171697.jpg');
background-size: cover;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="test.css"/>
</head>
<body>
<img class="pic">
</body>
</html>
you are trying to add a background image to an image tag <img /> ! this is not how the img tag works
You can insert an image by using the src attribute
<img src='/Users/leslienguyen/Desktop/bgBullet4.png' />
Or set the background to your body by simply moving the class='pic' to the body tag
<body class='pic'>
</body>
Try to add '' '' before and after your url adress.
Try inserting your PNG File into Imgur, and then embedding the imgur link into the code, so do
.pic {
background-image: url((IMGUR URL.png);
background-size: cover;
}
I am using the Bootstrap grid system to organise objects because I need to ensure the site is mobile-friendly. All objects adjust well to the resolution of the screen except for 1 gif.
On full resolution screen, the gif is 500x500 pixels and is perfectly sized to fit with the rest of the screen. However, on mobile (all devices), it remains 500x500, even when this makes it larger than the screen. Interestingly, on iPad pro (not other iPad) it assumes a width of 102.4 pixels, retaining height of 500.
All other items adjust perfectly and stay inside the viewport.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1">
<link
href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
html {
max-height: 100%;
max-width: 100%;
}
.logo {
color: #000000;
box-sizing: border-box;
object-fit: cover;
max-width: 10vw;
overflow: hidden;
}
#media only screen and (max-width: 768px) {
[class*="col-"] {
width: 100%;
max-width: 700px;
}
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-7 name">
<p>text</p>
</div>
<div class="col-sm-5 logo">
<img src="./cubegif.gif" class="image.fluid" alt="logo">
</div>
</div>
</div>
</body>
</html>
I am considering if the predefined size of the .gif is overriding whatever I am doing, but that does not explain the change on ipad pro.
I managed to find an answer! Posted below n case anyone else finds this thread and has the same problem:
in the HTML img tag, I gave it the following class:
<img class="fixed-ratio-resize" src="./cubegif.gif" alt="logo">
and added the following CSS:
`.fixed-ratio-resize {
max-width: 100%;
height: auto;
width: auto\9;
}`
I found this solution on http://www.dynamicdrive.com/forums/entry.php?293-3-Ways-to-Resize-Scale-Web-Images-in-Responsive-Design
Many thanks for all contributions!
Some quotation marks were missing in your code?
<body>
<div class="container-fluid">
<div class="row">
<div class="col-xs-7 title">
<p>text text text text</p>
</div>
<div class="col-xs-5 logo">
</div>
</div>
</div>
</body>
I try to make html.page with twitter bootstrap (NOT responsive). I grab code for html footer from here Flushing footer to bottom of the page, twitter bootstrap
But I've got some problems with it:
Footer width on iPhone was less than content width. I fixed it adding min-width (see it in main2.css)
Now I've got another problem:
I've set viewport meta tag and disable bootstrap-responsive.css, but I don't understand why the entire page does not fit the screen on iPhone (it's kinda zoomed in)? How to zoom it out by default?
I can't zoom it out. iPhone zoom it in after I stop zooming. I could delete viewport meta tag, but is there any other solution?
Here is a screenshot: (It's iOs simulator but on real phone it is the same)
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Le styles -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css" />
<!-- <link rel="stylesheet" type="text/css" href="assets/css/bootstrap-responsive.css" /> -->
<link rel="stylesheet" type="text/css" href="assets/css/main2.css" />
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div id="wrap">
<div id="main" class="container clear-top">
<div class="row">
<div class="span12">
<p>Your content here. Your content here. Your content here</p>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row">
<div class="offset8 span4">
This is footer text. This is footer text. This is footer text.
</div>
</div>
</div>
</footer>
</body>
</html>
main2.css:
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
}
#main {
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}
.footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
background: green;
width:100%;
min-width: 940px; /*<-- this fixed footer width issue*/
}
I am amazed that you said that in POINT 1, you solved your proble by using min-width Instead of min-width you should write max-width as you want to restrict it to a certain width.
Change your viewport meta tag to:
<meta name="viewport" content="width=940, initial-scale=1.0, maximum-scale=1.0">