I have here svg design, I put it inside a div also this div has navbar and some elements , when the screen is small every thing is okay, but when I increase the screen size the height of svg increases also and be like height:100% although I didn't customize the height and width of the svg, I just customized the viewbox , and it is problem because it comes over the other elements and I can not click or hover the buttons, and when I customize for example the width:100%; and height:400px; for the svg , the path inside it becomes small and not responsive
So what should i do in this case?
I want the width of svg become 100% and the height is 400px or samller, also i want the shape(path) inside it becomes responsive and its width always 100%
Note: I made the border of svg visible to understant how the height becomes when the screen is large
["SIMPLE LANDING PAGE" https://codepen.io/aseelkhanfar19/pen/OJgaNEy][1]
Related
My html has images which have their height and width hardcoded ( is a necessity because of the transition implemented on it). But three images are kept within a div. So is there a way to keep the container div to a specific height and width that makes is responsive to all the screen size and resizes ( if needed) the inner images. Any help will be appreciated.
Generally if you set img { max-width:100% , height:auto; } within a container holder , that will make them responsive in every screen view-port.Because they'r taking the size of it's parent container.
I had created a fluid layout (to build a RWD website) and in my design there are some images which needs to be shown as background image, as there will be text shown above the image (over lapping it).
Now in 'fluidLayouts.css' file, it shows:
img, object, embed, video { max-width: 100%;}
I have edited to:
img, object, embed, video
{max-width: 100%;
height:auto;}
Here i have added "height:auto;" but nothing happens to the background image, i don't see it fully, nor it re-sizes to any media which are mobile, tab or desktop.
How do i set a height for an background image for it to be scaled automatically to any media? Am using background image to the website design overall.
You are mixing two things here: img, object, embed and video are block elements that behave like they are supposed to (being block elements).
background-image is just a CSS property applied to an element (with some certain width and height that is calculated by yout CSS layout) but background-image itself does not and can not influence the size of an element.
Here's the fiddle for you to see how different settings behave: jsFiddle
You have two options.
First one is to use regular img tag and put the content above it using relative positioning.
Second one is to use background-image and either just apply background-size: cover - this will not however keep original proportions of an image, or and background-size: cover plus width declaration (whatever you like, fixed pixels, 100%, doesn't matter) and use a padding-bottom hack to extend this div to desired aspect ratio. So if your image is 500/300 than your padding-bottom needs to be (300/500)*100 = 60%.
I would like to make a banner with a possibility to expand it to the full screen independent on resolution.
<body>
<div class="div_left"></div>
<div class="div_middle_fixed"></div>
<div class="div_right"></div>
</body>
Here is a div with a jpg placed in the center of a screen with fixed size 1000px. And I need to “expand” this banner to full screen using 2 other pics (div with dynamic size). I need one at the beginning of my fixed banner which expands dynamic to the left. And the second one at the end of my fixed banner which expands dynamic to the right.
I need this trick so the graphics of a banner has to match at the adges
How can I do this?
I would recommend using the images as backgrounds to those divs, and so forth use this CSS attribute to keep it contained when the site is scaled:
background-size: contain;
I hope this helps!
you can try to add a background-size with the following parameters
cover - Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
or
contain - Scale the image to the largest size such that both its width and its height can fit inside the content area
and
percentage - Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto"
http://www.w3schools.com/cssref/css3_pr_background-size.asp
I want to load some photos from a server and display each of them in an own box such that the box is filled and the image centered (not stretched), if it is to big. Can I achieve this for example with CSS without knowing the size of each image? Maybe with max-width or so?
Here is an example of what I want:
You could use the CSS3 background-size property.
Specifically, you would use either background-size:contain or background-size:cover.
From the spec:
Values have the following meanings:
‘contain’
Scale the image, while preserving its intrinsic aspect ratio
(if any), to the largest size such that both its width and its height
can fit inside the background positioning area.
‘cover’
Scale the image, while preserving its intrinsic aspect ratio
(if any), to the smallest size such that both its width and its height
can completely cover the background positioning area.
Source: http://www.w3.org/TR/css3-background/#the-background-size
Which one you used would depend on the aspect ratio of the original images you are using.
Scroll down on this resource to see some examples: http://www.css3.info/preview/background-size/
The quickest thing that you can do is to put the image as a background image that is centered:
style="background: url(images/42.png) 50% 50% no-repeat"
Images smaller than the box will be centered in the box. Images that are larger will experience cropping.
The downside is, there is no scaling.
For scaling, you would have to know the dimensions, employ some math to calculate a scaling amount that will preserve the aspect ratio and use an actual element that is inside a cropping container that uses "overflow: hidden".
Here what you do. If for instance the image is inside a DIV with an ID called "boxer" You'll now create a CSS that will automatically re-size every image that's inside the DIV with the ID "boxer" The CSS will look like this
#boxer img {
Width: 600px
Height: 600px;
}
The above CSS will automatically re-size whatever image you put inside to the specifications in the CSS. This will fit the box with the ID "boxer" precisely if the dimensions corresponds to that of the CSS. You could just do 100% for both the width and the height, that way it fits the box.
Currently pictures are being placed into my website within a div container with a given width and height.
Some pictures are landscape, others are portrait.
Currently I give the images a static width and height using CSS to position it correctly inside it's container.
.winner .winner-image img {
height: 159px;
width: 143px;
}
However more often than note this distorts the picture.
What's the recommended way to display images without distorting them? Best practices?
Without some server side code to actually determine the height and width of the image, the best idea would be to set EITHER the height OR the width, but not both. This will cause the image to be resized proportionally. Which dimension you choose to constrain would depend on your site layout.
To not distort them, the images must be given their native height and width (or a proportional value). Just assign one of the values, and most modern browsers will scale the image proportionally for you.
You can add an external element (span or div) with a fixed size, and have that element not display overflowed content.
To guarantee that your images are re-dimensioned, you can also set a height OR width value for images, matching the wrapping div value (only one value must be assigned, so that images are not distorted.
<style>
.img-wrapper {display:inline-block; height:159px; overflow:hidden; width:153px;}
.img-wrapper img {height:159px;}
</style>
<div class="img-wrapper">
<img src="">
</div>
The best way is to create thumbnail of your image once uploaded to a server. Thumbnail should be 159x143 px, but if you need to show images now you can set for div fixed width with css property "overflow: hidden;" and just set height of your image. do not touch width
If it's important that all images show in the same size, and you don't want to distort them, you have to crop them for the best result. Otherwise, you could wrap the image in a div, set the height and width of the div and hide the overflow, or use the image as the background for the div.
If height and width may be different across images, then go with the solutions already mentioned, i.e. setting either height or width.