I have a .png with several instances of a character that I intend to animate unsing javascript.
I have put this image inside a container div, like this:
<div class='mage'>
<img src='images/mage.png' />
</div>
And the css:
.game .mage {
width: 25%;
}
.game .mage img {
width: 100%;
}
The container div, needs to resize according to the browser resolution and that's where I have a problem. In order to "cut" the sprite, I would net to set a fixed size for the container and use overflow: hidden, but I need it to be dynamic.
How can I resize the container and at the same time, "cut" the image inside of it?
Thank you.
Related
I have some svg files with position: "absolute" in my page, but whenever they're positioned close to the corners of my page they end up expanding the width of my Container element (I'm using Material UI React), I've tried using "maxWidth":"100vw" on the page container, with no success, as well as the prop maxWidth="lg" and "md". If possible I'd like the svg or img file to just disappear into the nothing without interacting in any way with its outside container https://gyazo.com/9d3d8cf86748ac434700ac0b0ceaf1c6
Have you considered doing something like this?
.container {
/* If for some reason the image doesn't fit, hide the overlap */
overflow: hidden;
}
/* Make image sit within it's container */
img {
height: auto;
width: 100%;
}
#banner {
background: url(http://www.lazarangelov.com/wp-content/uploads/2015/12/lazar1-1920.jpg) no-repeat center center/contain;
height: auto;
max-width: 100%;
<div id="banner"></div>
img {
height: auto;
max-width: 100%;}
<img src="http://www.lazarangelov.com/wp-content/uploads/2015/12/lazar1-1920.jpg" alt="">
I have running always into the problem with the responsive images,and i did not find an answer to clarify the problem.
The problem is with image
image {
height:auto;
width:100%;
}
when i add a simple image and style it, it works. when i start a project more complex with a lot of divs and I set the same properties doesn't work anymore. What's the purest explanation for this.
This is because when you add the <img> to the html directly, the browser sets the height of the element to the height of the image you provided (unless otherwise specified). When you add the image as a background of a <div> and set the height to auto, it tries to size the div to the height of the content. However, in this case, there is no content -- only a background that will be the background once the div has some height. An empty div has no height. Therefore, if you want the image to be the background of the <div>, it must either contain some content, or have its height set manually.
I have a slider that is based on an un-ordered list. The way that it is made is to have a background-image, and then whatever text and header in the display on top of <li>.
This works fine, but it stretches the background-image, and using :cover cuts the image off. I have a great CSS workaround to use an image instead of a background-image, but then the text gets pushed to the bottom. I was wondering if there was a way to add this class to the background image
img {
width: 100%;
float: left;
margin-right: -100px;
position: relative;
}
Or... Can I style the list items to go on top of an image in this markup?
<li>
<img class="img" src="images/sandpiperBG.jpg" />
<h1>Fluid, flexible, fantastically minimal.</h1>
<p>Use any HTML in your slides, extend with CSS. You have full control.</p>
</li>
I tried to add a z-index to the <ul> and the <ul><li>, but it didn't work.
z-index controls what is on top, but it doesn't take objects out of the flow of the document. If you want to use an image outside the flow of the document you can position it absolutely and then z-index comes into play.
If none of these options works, your best bet might be to resize the image to prevent stretching or cutting.
You need to change the IMG to a DIV so that you can use a background image.
HTML:
<div class="myimg" />
CSS:
.myimg {
width: 100%;
float: left;
margin-right: -100px;
position: relative;
background-image:url('images/sandpiperBG.jpg')
}
My css:
a.red, object, embed {
display: inline-block;
background-image:url(/bowties/red.png);
background-size: contain;
background-repeat:no-repeat;
width: 100%;
height: 30%;
}
My Html:
<a class="red"/>
What I want to do is have the image automatically sized right so I can use these as menu items. One on top of the next and so on. If I kept them in an image tag wrapped in an anchor then "height: auto;" works. I want to turn them into sprites which is why I am pulling it out, but I would like these to scale based on the size of the screen. Thanks in advance!
From my understanding this is not possible.
I found a resource that simply had me add a relatively sized 'filler' image. A blank placeholder that caused the div to get a height and width, then be able to be re-sized on the container re-size. Slight bit of a hack, but worked.
I know how to stretch background image to fit its container (with background-size property). But how to achieve the other way around without setting width and height manually?
To better make my point, assume we have a p element with one line of text and set its background-image to an picture of 800*600px. How to adjust the width and height of p automatically to 800*600?
I ask the question because I am looking for a better workflow. It's quite annoying to change width and height in CSS every time I change the image size in Photoshop. The workflow is like below:
Change image in Photoshop (likely end up with a slightly different image dimension)
Remember that new dimension
Go into CSS file looking for that particular element which uses that image as bg
Change width and height of the element (if i still remember them correctly..)
Instead of using a background image, you could use a img element and set the containing div's display to inline-block. You'd then need to create an inner div to wrap the content and position it absolutely relative to the containing div. Since the img is the only thing in the flow, the containing div will resize relative to the image.
Pretty much a hack, but I think it would give the effect you are looking for.
http://jsfiddle.net/Km3Fc/
HTML
<div class="wrap">
<img src="yourImg.jpg" />
<div class="content">
<!-- Your content here -->
</div>
</div>
CSS
.wrap {
display: inline-block;
position: relative;
}
.wrap img + .content {
position: absolute;
top: 0;
left: 0;
}
Your only option would be to programatically add the height/width. Compass for Sass has functions that can return the dimensions of the image when the CSS file is compiled: http://compass-style.org/reference/compass/helpers/image-dimensions/
.foo {
height: image-height('my-img.png');
width: image-width('my-img.png');
}
According to the documentation for CSS3 w3schools this should do it:
div {
background-size: contain; /* or cover */
}
EDIT: using javascript, you could load the image from the background-image property and set the size of the container.
(function() {
var img = new Image();
var $mydiv = $('#mydiv');
img.src = $mydiv.css('background-image').slice(4,-1);
$mydiv.width(img.width).height(img.height);
})();