So I'm trying to stretch the picture using the resize bar without changing the size of it. Also would help if I could somehow keep the aspect ratio too if you could. I have been searching for a few days and trying a bunch of different things. I'm a self-taught html. :( Can someone please guide me?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body{
text-align:center;
}
.asd{
width:500px;
overflow:auto;
resize:both;
}
.qwer{
background-color:blue;
width: 100%;
height:100%;
}
.asdf{
display:block;
}
</style>
</head>
<body>
<div class="asd">
<div class="qwer">
<div class="asdf"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQNn0ZQI8Xa1XrrCNdvIxslsIiIC67HmV6BxVTTgIhEPehwsDU7" width="225" height="225" /></div>
</div>
</div>
</body>
</html>
Idea
I'm not 100% sure what exactly do you want to achieve, but if you are looking for a way to make some sort of image resizer - this is how I would approach it.
You need an absolutely positioned image and a relatively positioned div.
Image sits inside the div, which acts as a clip mask. That gives you 2 benefits:
You can easily control the visible dimensions by adjusting the div size
You can stretch the img tag as much as you want.
Basic example
So in terms of a sample code - very basic.
<style>
.parent {
position: relative;
width: 200px;
height: 200px;
background: yellow;
margin: 40;
/* THIS IS THE KEY */
overflow: hidden;
}
.child {
position: absolute;
top: -10px;
left: -10px;
width: 100px;
height: 100px;
background: red;
}
</style>
<div class="parent">
<img class="child" src="kitty.png" />
</div>
If the stretching is to be dynamic - ie. can me changed, then you can now use javasript to change the {left, top} and {width, height} of the image to achieve the stretch effect.
If it's supposed to be static - always the same - you can just set the parameters in css.
Related
I'm currently trying to make a landing page and I have a problem. There are some white stripes all around the <img>, it looks like this.
I would like the picture to be full-screen, without any stripes etc.
<!DOCTYPE HTML>
<head>
<title>Szafranowka - Apartments & Restaurant </title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="background">
<img src="background.jpg" id="background"> </img>
</div>
</div>
</body>
</html>
And here's CSS:
#container
{
width: 100%;
height: 100%;
}
#background
{
width: 100%;
height: auto;
opacity: 0.6;
position: relative;
}
There is padding automatically applied to the body.
Just add this to your css
body{
padding:0;
margin:0;
}
Edit: Solution to follow up in comments
You will need to remove the <img> tag and change your background div in your css
#background
{
width: 100%;
height: auto;
background: url("background.jpg");
background-size: cover;
opacity: 0.6;
position: relative;
}
By default, each HTML tag has a browser-predefined appearance/style, in your case, body has margin: 8px on Chrome, for example. You need to reset all of those predefined styling rules in order not to have surprises, read about CSS resets at https://cssreset.com/what-is-a-css-reset/
Moreover, in order to stretch the image to cover all the visible area, you need to make sure body has width: 100vw; (viewport width) and height: 100vh; (viewport height) and everything else has 100% on both or inherits them from their parents.
Working snippet at https://codepen.io/Raven0us/pen/KZQejX
The browser applies its own default styles to websites that you can alter with your own css. Take a look at this cheat sheet
An Easy fix for your issue is to add css:
body{
margin:0;
}
I am new to web design and for a class I am creating a site for a restaurant and I made my mockup but I am having issue (or maybe it's not possible) about having my image display as I do in my mockup (image to follow)
Here is the top of my mockup
I want to have the header 100% (figured that out)
the image 100% width
the image is 1480x808
and with this code it stays 100% width but the height isn't matching up with my next section (it either pushes it off the page entirely or in other resolutions has a big white gap between it and the next section)
Could someone point me in the right direction here?
Would really appreciate it
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#header {
height: 100px;
background-image: url(_images/headerpattern.jpg);
background-repeat: repeat;
}
#mainpicture {
height: 808px;
width: 100%;
max-height: 808px;
margin-left: auto;
margin-right: auto;
}
#redbar {
height: 10px;
width: 100%;
background-color: #94201f;
}
#slogan {
height: 207px;
width: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="mainpicture"><img src="_images/mainpic.jpg" alt="" width="100%"/></div>
<div id="redbar"></div>
<div id="slogan">Content for id "slogan" Goes Here</div>
<div id="redbar"></div>
</div>
</body>
</html>
try removing the height and max-height property from #mainpicture
Update
For the red bar I'd remove them from your markup and use border-bottom on the first image and border-bottom on the second
Here's a fiddle
remove the height from #mainpicture.
or
if you need the height you can try putting the image in background of #mainpicture and set background size cover..Leave the #mainpicture div blank
like
<div id="mainpicture"></div>
css
#mainpicture {
height: 808px;
width: 100%;
max-height: 808px;
margin-left: auto;
margin-right: auto;
background-image:url(_images/mainpic.jpg);
background-position:center top;
background-size:cover;
}
If you want your page to be responsive, you must have some rules.
You want the image to show, as well as the slogan area. But the page can be seen in several devices, with several sizes.
So, you should use relative dimensions, so your goal can be achieved trought the many devices...
Place the image inside a div with relative dimensions...
I want to have a website where I can upload images of different sizes to be displayed in a jquery slider.
I can't seem to fit (scaling down) the image in a containing div. Here's how I'm intending to do it
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="Imtest.css"/>
</head>
<body>
<div id="wrapper">
<div id="im"><img src="Images/Scarpa2_1.jpg" /></div>
</div>
</body>
</html>
And the CSS
#wrapper {
width: 400px;
height: 400px;
border: 2px black solid;
margin: auto;
}
#im {
max-width: 100%;
}
I've tried to set the max-width of my image to 100% in CSS. But that doens't work.
You can use a background image to accomplish this;
From MDN - Background Size: Contain:
This keyword specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.
Demo
CSS:
#im {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url("path/to/img");
background-repeat: no-repeat;
background-size: contain;
}
HTML:
<div id="wrapper">
<div id="im">
</div>
</div>
This is an old question I know, but this is in the top five for several related Google searches. Here's the CSS-only solution without changing the images to background images:
width: auto;
height: auto;
max-width: MaxSize;
max-height: MaxSize;
"MaxSize" is a placeholder for whatever max-width and max-height you want to use, in pixels or percentage. auto will increase (or decrease) the width and height to occupy the space you specify with MaxSize. It will override any defaults for images you or the viewer's browser might have for images. I've found it's especially important on Android's Firefox. Pixels or percentages work for max size. With both the height and width set to auto, the aspect ratio of the original image will be retained.
If you want to fill the space entirely and don't mind the image being larger than its original size, change the two max-widths to min-width: 100% - this will make them completely occupy their space and maintain aspect ratio. You can see an example of this with a Twitter profile's background image.
if you want both width and the height you can try
background-size: cover !important;
but this wont distort the image but fill the div.
I believe this is the best way of doing it, I've tried it and it works very well.
#img {
object-fit: cover;
}
This is where I found it. Good luck!
It's very simple. Just Set width of img to 100%
Hope this will answer the age old problem (Without using CSS background property)
Html
<div class="card-cont">
<img src="demo.png" />
</div>
Css
.card-cont{
width:100%;
height:150px;
}
.card-cont img{
max-width: 100%;
min-width: 100%;
min-height: 150px;
}
I am using this, both smaller and large images:
.product p.image {
text-align: center;
width: 220px;
height: 160px;
overflow: hidden;
}
.product p.image img{
max-width: 100%;
max-height: 100%;
}
I use:
object-fit: cover;
-o-object-fit: cover;
to place images in a container with a fixed height and width, this also works great for my sliders. It will however cut of parts of the image depending on it's.
In a webpage where I wanted a in image to scale with browser size change and remain at the top, next to a fixed div, all I had to do was use a single CSS line: overflow:hidden; and it did the trick. The image scales perfectly.
What is especially nice is that this is pure css and will work even if Javascript is turned off.
CSS:
#ImageContainerDiv {
overflow: hidden;
}
HTML:
<div id="ImageContainerDiv">
<a href="URL goes here" target="_blank">
<img src="MapName.png" alt="Click to load map" />
</a>
</div>
Several of these things did not work for me... however, this did. Might help someone else in the future. Here is the CSS:
.img-area {
display: block;
padding: 0px 0 0 0px;
text-indent: 0;
width: 100%;
background-size: 100% 95%;
background-repeat: no-repeat;
background-image: url("https://yourimage.png");
}
I have met the same issue and fixed using the following CSS.
Hope this would help you.
max-width: 100%;
max-height: 100%;
width: max-content;
height: max-content;
.parent {
border: 1px solid black;
width: 200px;
height: 100px;
}
.image {
max-width: 100%;
max-height: 100%;
width: max-content;
height: max-content;
border: 1px solid black;
}
<div class='parent'>
<img class='image' alt='' src="https://avatars.githubusercontent.com/u/95250818?v=4"></img>
</div>
I've got (again) the problem of adapting a child <div> tag's size to its parent size. The parent element is controlled by another script (don't want to touch that) and could be placed anywhere on the screen with variable height/width. In my example below that's the #container. I would like to put some layout in it, which has some variable and some fixed dimensions:
a footer (here: #footer), having a fixed height (of e.g. 100px) and fills up the whole width of the parent
a navigation bar on the left (here: #left), having a fixed width (of e.g. 150px) and fills up the whole height of the upper part
a content part, right from the navigation bar, that is just the remaining space.
I found some solution for the "footer", which actually works (Make a div fill the height of the remaining screen space -> the posting by 'daniels'). But I couldn't achieve the #left part to fill up the whole height.
Below is my example code (Online-Version: http://worldtalk.de/v2013/test.html; will not stay online forever!):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
* { margin: 0; }
html, body { height: 100%; }
#container {
position: absolute; /* have no control over that container element */
width: 400px; height: 300px;
top: 100px; left: 10px;
background: red;
}
#upper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px; /* -100px being the size of the footer */
}
#footer {
background: green;
height: 100px;
}
#left {
background: yellow;
float: left; width: 150px;
/* the following CSS doesn't do what I want... */
min-height: 100%;
height: auto !important;
height: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="upper">
<div id="left">left - shall reach down until footer</div>
content part...<br> shall be next to it...
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
Any ideas to achieve this without using JavaScript?
Regards,
Stefan
Solution 1
I assume the issue with position:absolute; is that the left navigation would be placed on top of the footer, however here is a solution using absolute for both the left nav and the footer. The flaw with it is that the left navigation continues under the footer which may or may not be an issue.
#footer {
position:absolute;
left:0;
right:0;
}
#left {
position:absolute;
bottom:0;
}
http://jsfiddle.net/LmCLz/1/
Solution 2
Rearrange the elements like so:
<div id="container">
<div class="inner">
<div id="left">left - shall reach down until footer</div>
<div id="right">content part...<br> shall be next to it...</div>
<div class="clear"></div>
</div>
<div id="footer">footer</div>
</div>
Then apply a margin-bottom:-100px; to make room for the footer:
.inner {
height:100%;
margin-bottom:-100px;
}
http://jsfiddle.net/LmCLz/3/
I'm trying to develop a header area which expands past the usual 960px wide container, without using a background image, my reason for this is because an <img> tag would work better in my case.
My problem is, if i place my image in the container, such as this code example:
<style>
#container {
width: 960px;
margin: 0 auto;
}
</style>
<div id="container">
<img src="myimage.jpg" alt="my image" />
</div>
I want to be able to take this image an center it, across the page, expanding past its container to the end of the viewport, without scrollbars being added, assume the size of the image remains at a constant 1280px wide, but the height varies.
I've been trying this morning, but i don't think it can be done without setting overflow:hidden on the body tag, which is bad because i'd like it t obe able to scroll if the window is smaller than the container.
I hope you guys can help :)
You are right, it does not work. Why does it has to be inside the container?
You could do it like this.
<html>
<head>
<style>
html, body{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
text-align: center;
}
#header{
width: 2000px;
float: left;
overflow: hidden;
}
#container{
width: 960px;
height: 500px;
margin: 0 auto;
overflow: hidden;
}
#page{
overflow: hidden;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="page">
<div id="header">
<img src="myimage.jpg" alt="my image" />
</div>
<div id="container">
</div>
</div>
</body>
</html>
If the img is to be placed exactly at x-pos:0 and Y-pos:0, you could use position:absolute to placed it:
img#my_header{
position:absolute; // Tell the browser to break document work flow for this ID
z-index:1; // Tell the browser to pull up in the stack this ID by 1
top:0; // tell the browser to place this ID at 0px from top of view port
left:0; // tell the browser to place this ID at 0px from left of view port
}
This is a sample, to give you an idea who you can break the document workflow to set your img tag into the desired place... adjusting top and left coordinates, you should solve it!
Hope it helps!
My thought is similar to Lucas's. Take the out of the container, and put it in it's own container (id="header" for example). Set #header to width: 100% (which should be the width of the viewport, and overflow: hidden. Then position #header as you want - use Zuul's suggestion of absolute positioning if necessary.
...
<style type="text/css">
#header { width: 100%; overflow: hidden; margin: 0; }
</style>
...
<div id="header">
<img src="myimage.jpg" alt="My Image" />
</div>
...
I think that should work out for you.