I'm working on a webpage for my HTML class and I'm having some trouble resizing an image. I'm using the code as shown below. The width attribute does not change anything.
#BicycleBanner {
margin-top: -20% ;
height: 200%;
width: 900%;
}
Please post you HTML to test, but in theory you can resize a background image in a container using the background-size css property.
More info here - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images
#BicycleBanner {
display: block;
margin-top: -20% ;
max-width:900%;
max-height:200%;
width: auto;
height: auto;
}
Related
This CSS code is in the default AMP style sheet:
html, body {
height: auto !important;
}
It becomes a problem if you want to use flexbox to make sure the body of the HTML document takes up the whole screen, even if there is not enough content to take up the full screen. For that to work, you need to set the height of html, body to 100%.
Here is an example of using flexbox to make sure your footer is at the bottom even when there is not enough content on the page.
Any way to accomplish this and still remain Google AMP compatible?
I don't know how to fix your flexbox issue, however, I came to this page looking for a way to get 100% background and managed to figure out how to get the html element to 100% page height. However, because amp sets position: relative!important; on the body element, the same trick cannot be used to set body height. So - to end, no, I don't have a solve to your issue. But maybe a start or perhaps will help someone else with the background issue.
<html class='max'></html>
.max {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
}
html {
background: #c5975b no-repeat url("<img-URL>");
background-size: auto 100%;
padding: 0;
margin: 0;
box-sizing: border-box;
}
You can use min-height: 100vh;
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
full sample code: https://amp-cover-image.glitch.me/
You can achieve this by setting min-width: 100% to body and html.
The posted question does not have a clear solution. The height auto rule can not be overwritten by using the following example.
html, body{
height: 100% !important;
}
I assume the Amp team noticed this and replaced your example:
html, body {
height: auto !important;
}
with the following code:
html:not([amp4ads]),
html:not([amp4ads]) body{
height: auto !important;
}
After this change it is now possible to overwrite height auto rule by using the same selector:
html:not([amp4ads]),
html:not([amp4ads]) body{
height: 100% !important;
}
I'm parsing images from different APIs and I want to display it on website. But I have problem with displaying it in specific size to fit it in bootstrap list (~700x300px) Some times images are in portrait instead of landscape. Whole 700x300px space should be filled by image, but not stretched.
Approach #1
Download image to server, resize it and transform. Host from localserver instead of remote links.
Approach #2
Use some magic of AngularJS (I'm newbie on that area)
Approach #3
Use some magic of CSS/HTML5 (I'm also newbie in this)
For now i got something like this
<style>
.list {
width: 700px;
height: 250px;
overflow: hidden;
position: relative;
}
div img {
position: absolute;
}
</style>
Sorry, my English is poor, if the following statement does not fluent, please understand
I did not quite understand what you mean, but I think this can solve your problem:
.list {
width: 700px;
height: 250px;
overflow: hidden;
position: relative;
}
div img {
position: absolute;
/*Add this code*/
width: 100%;
}
Or you can set the image as a background-mage to the DIV, then set background-size to cover.
div {
background: url(images/from/api.jpg) 50% 50%/cover no-repeat;
}
I know very little to nothing of jQuery or JavaScript. So after fiddling - and failing - for hours here's my question:
In the header of my website (http://dev.shespeakswithpassionmembership.com/index.php), I have got an svg image that shrinks on scroll. Great, it works!
But, what happens is: the menu doesn't jump next to the shrinking image. I want that because it saves a lot of space and it looks nicer.
This is what I've done so far:
The image is centered on load. For this I have added this CSS to the navbar-header:
.navbar-header {
width: 100%;
}
The image has got this CSS:
header.large img {
height: auto;
margin: 10px auto;
max-width: 100%;
width: 900px;
display: block;
}
When you scroll the image shrinks. As you can see the header has a class of .large and the image is shrunk by removing that class and replacing it with .small:
header.small img {
height: 49px;
max-height: auto;
width: 154px;
max-width: 100%;
margin: 10px 5px 0 10px;
}
This is done by this jQuery script:
function slabTextHeadlines(){jQuery("h1.slabbed").slabText({viewportBreakpoint:380,minCharsPerLine:10})}var App=function(){function e(){jQuery.browser.msie&&jQuery.browser.version.substr(0,1)<9&&jQuery("input[placeholder], textarea[placeholder]").each(function(){var e=jQuery(this);jQuery(e).val(e.attr("placeholder")),jQuery(e).focus(function(){e.val()==e.attr("placeholder")&&e.val("")}),jQuery(e).blur(function(){(""==e.val()||e.val()==e.attr("placeholder"))&&e.val(e.attr("placeholder"))})})}function r(){jQuery(".carousel").carousel({interval:15e3,pause:"hover"}),jQuery(".tooltips").tooltip(),jQuery(".popovers").popover()}function o(){jQuery(".search").click(function(){jQuery(".search-btn").hasClass("icon-search")?(jQuery(".search-open").fadeIn(500),jQuery(".search-btn").removeClass("icon-search"),jQuery(".search-btn").addClass("icon-remove")):(jQuery(".search-open").fadeOut(500),jQuery(".search-btn").addClass("icon-search"),jQuery(".search-btn").removeClass("icon-remove"))})}return{init:function(){r(),e(),o()}}}();jQuery(document).on("scroll",function(){jQuery(document).scrollTop()>100?jQuery("header").removeClass("large").addClass("small"):jQuery("header").removeClass("small").addClass("large")}),jQuery(window).load(function(){setTimeout(slabTextHeadlines,.01)}),jQuery(document).ready(function(){jQuery("#totop").hide(),jQuery(window).scroll(function(){jQuery(this).scrollTop()>100?jQuery("#totop").fadeIn():jQuery("#totop").fadeOut()}),jQuery("#totop").click(function(){return jQuery("html, body").animate({scrollTop:0},660,"easeInOutExpo"),!1})});
$(function() {
$('[data-rspnsv]').rspnsv({delay: 200, duration: 3000});
});
For the menu to jump to the right of the svg image, I need to remove the width: 100%; and to assign a width: auto; to it. I would like to do that by adding a line of code to the script above so that it not only replaces header.large with header.small, but does the same trick with the navbar-header.
Is there anyone who can append the script to do this? To me it would seem rather simple for someone who knows about jQuery (which I don't).
Thanx in advance,
Thom
This is a CSS question. It doesn't require any jQuery changes. Add this CSS
header.small .navbar-header{
width: auto;
}
If you want the menu to remain at the bottom, this is one way of doing that.
header.small #js-meganavi{
margin-top: 46px;
}
i have a the following code for a following image path in web project of visual studio solution
Folder1\Images\banner.png'
<div id="placeholder">
</div>
and the css to set the background for this is
#placeholder {
position:relative;
width: 40em;
margin:auto;
height:4em;
margin-top: -1em;
padding-top: 2em;
background-image:url('../folder1/Images/banner.png');
/* background('('../folder1/Images/banner.png') */
background-size: 40em;
background-repeat:no-repeat;
clear: right;
}
I also tried with ~ instead of ../ symbol but it doesnt work.
Should i use background-image or background attribute to set the background image of the div. whichever attribute i use i don't get any image in the background.
please help.
You need a add a width and a height of the background image for it to display properly.
So you want something like
#placeholder {
background-image:url('../folder1/Images/banner.png');
height: 100px;
width: 100px;
}
I have a CSS problem. I have an image that is 1024x500 pixels. Now the problem is, whenever the browser window/viewport changes width below the width of the image(1024px), the image starts to get cut off. Now as you can see, I set the container width to 100% when the viewport size goes below 1024px, and it does resize proportionally, but the sides of my image get cut off more and more as the browser resizes(smaller).
Could anyone help me get my image to resize dynamically pixel for pixel (without losing any of the original picture - no cut offs)?
Check out my webpage and resize the browser window to see what I mean. Pay attention to the sides of the images getting cut away...
HTML: Note my Original image is 1024x500
<div class="ei-slider">
<ul class="ei-slider-large">
<li>
<img src="http://lamininbeauty.co.za/images/large/makeup.jpg" alt="Vertical Sunbed TanCan"/>
</li>
</ul>
</div>
CSS:
The normal CSS for large screens
.ei-slider{
position: relative;
width: 1024px;
height: 500px;
margin: 0 auto;
}
.ei-slider-large{
height: 100%;
width: 100%;
position:relative;
overflow: hidden;
}
.ei-slider-large li{
position: absolute;
top: 0px;
left: 0px;
overflow: hidden;
height: 100%;
width: 100%;
}
.ei-slider-large li img{
width: 100%;
}
For when the Browser window goes below the image width: 1024px:
#media screen and (max-width : 1023px){
.ei-slider{
width: 100%;
}
}
For smaller screens when my images are cut off: Note my Original image is 1024x500
#media screen and (max-width: 930px) and (min-width : 831px){
.ei-slider{
width: 100%;
}
.ei-slider-thumbs li a{
font-size: 11px;
}
.ei-slider-large li{
position: absolute;
top: 0px;
left: 0px;
overflow: visible;
height: 100%;
width: 100%;
}
.ei-slider-large li img{ /*HERE IS MY PROBLEM*/
width: 930px;
height: 454px;
}
}
Thank you!
you use:
max-width: 100%;
height: auto;
width: auto; /* for ie9 */
This will make whatever you assign the css to resize dynamically to fit its container based on the max-width: 100% statement. If you would like it differently, change the max width statement accordingly.
I have a simple solution for that. Just give the width parameter in terms of view-port percentage.
Syntax :
width: <Percentage>vw;
Example :
<img src="Resources/Head.png" alt="" style="width: 100vw; height: 85px">
Here, the height of the image is fixed but the width will be resized to 100% of the view-port, whatever its size may be.
Hope this helps :)
I had the same problem because I'm using the same jquery plugin (ie-slider). I found out that the image is passed additional (inline) styles from the Javascript code and in fact it is just shifted-left and not actually cut off. The code passes dynamic values to the tag which are got from the image itself at the time of re/load in a particular viewport width. The author uses this in the .js file.
var $img = $(this);
imgDim = _self._getImageDim( $img.attr('src')); //gets the dimensions from the image
He then gives the image a margin-left like so
$img.css({marginLeft: imgDim.left}); //assigns a new margin-left, overrides any value set for this property in the .css file because it's inline
When the viewport width gets smaller this is always a negative value. The work around is to set
$img.css({marginLeft: 0});
It worked fine for me after, with no arising issues from the change. Good luck.