This is my css which handles image on my page:
Sample CODEPEN
.img-responsive {
display: block;
max-width: 10%;
height:400px important!;
margin-left: 33%;
margin-top: 7%;
height: auto;
}
As I increase or decrease width, it reflects well. but changing width does not make any effect.
How can I manually increase or decrease the image width here?
css code is in index.php itself as inline css.
I want increasing the width must not increase the height of image
If I'm not mistaken, I want increasing the width must not increase the height of image means that you want a way to change the width of an image, while keeping the height constant. If you're happy with doing this through CSS, you can wrap the image in an encapsulating div, control the div's size, and then tell the image to completely fill up the div.
The code boils down to:
<head>
<style>
.img-responsive {
height:100%;
width:100%;
}
.image-container
{
width:250px;
height:140px;
}
</style>
</head>
<body>
<div class="container image-container">
<img src="http://www.menucool.com/slider/prod/image-slider-4.jpg" class="img-responsive" />
</div>
</body>
If you change the width or height attributes of the image-container class, you'll see that the image stretches correspondingly.
Related
I have thumbnail DIVS that are simply an image with the product name below. Here's the code:
<div class="thumbs">
<img src="IMAGE" />
<div>Product Name</div>
</div>
The CSS is below:
.thumbs {
float:left; width:210px; height:200px; text-align:center;
}
.thumbs div {
}
.thumbs img
{
max-height: 115px;
max-width: 100%;
}
Originally I had the images at 115px height so every row had the same height images and the text below was aligned correctly. Some of the images became too wide so I had to make a restriction on the max-width.
Problem: Since the image heights vary ... the text below the thumbnail varies in vertical placement. I want the text to be on the same line across the rows.
Example page:
http://test.pillarsoflifebook.com/banquettes/designer-banquettes/
*Note the first 3 thumbnails are the same height .. thus the names below them are aligned
Any thoughts?
You could solve this by wrapping the images in a div (or setting your anchor to display: block) and setting a max-height or height on that wrapper, and setting it to overflow: hidden.
Here's a jsFiddle example that will force the thumbnail blocks to always display the same regardless of the size of the image.
Edit: Updated example with some of your images.
Edit2: To vertically align the image inside the anchor, set the line-height of the anchor equal to its height (in this case line-height: 115px;), and set vertical-align: middle; on the img itself. Updated example including this fix here.
If you are using CSS3, you can use css3 translate property.
This Re-sizes based on whatever is bigger. If your height is bigger and width is smaller than container, width will be stretch to 100% and height will be trimmed from both side. Same goes for larger width as well.
.thumbs {
width:210px;
height:200px;
position:relative;
display:inline-block;
overflow:hidden;
}
.thumbs > .thumbs img {
position:absolute;
top:50%;
min-height:100%;
display:block;
left:50%;
-webkit-transform: translate(-50%, -50%);
min-width:100%;
}
Example: http://jsfiddle.net/shekhardesigner/aYrhG/
Answer from CSS: How can I set image size relative to parent height?
<div id="show01">
<img src="https://www.google.com/images/srpr/logo4w.png">
<img src="https://www.google.com/images/srpr/logo4w.png">
<img src="https://www.google.com/images/srpr/logo4w.png">
</div>
<div id="content"></div>
CSS
#show01{
margin-top:14px;
position: relative;
height:auto;
border:thin solid blue;
}
#show01 img {
position: absolute;
max-width:70%;
}
#content{
background:#999;
height:45px;
}
img must be position:absolute because they are subject of jquery slide show.
but, in that case div content goes to the top of page, because div #show01 has no height. It's just a blue line at the top.
So, how can I keep img position:absolute and show01 to have height as the img inside.
I cannot define div show01 height in pixels, because of keeping responsive layout.
fiddle is here
This is semi-hack(ish).. but you could set a margin for #show01.
Try margin-bottom:24%;.. see the example and let me know if this is what you were aiming for.
Example
Basically you are going to have to set a margin equal to the size of the images to displace the unspecified height.. It seems to work responsively when you resize the browser too..
I have a layout where I need to use height: 100% on html and body (and any wrapper divs I resort to using) to achieve an effect similar to pages, so that the content on my first "page" is centred, scrolling down the content on the second "page" is centred etc.
The html looks like this:
<section class="page" id="p01">
<div class="spacer">
</div>
<div class="outer">
<div class="inner">
Some content
</div>
<div class="inner">
Some content
</div>
</div>
</section>
<section class="page" id="p02">
<div class="spacer">
</div>
<div class="outer">
<div class="inner">
Some content
</div>
<div class="inner">
Some content
</div>
</div>
</section>
and the vertical centring etc. achieved with this styling:
body, .page {height: 100%; margin: 0 auto;}
.spacer {
float: left;
height: 50%;
margin-bottom: -150px;
}
.outer {
height: 300px;
width: 100%;
background-color: #fca;
clear: both;
position: relative;
display: block;
white-space: nowrap;
}
.inner {
width: 41%;
margin: 0 6%;
height: 300px;
background-color: green;
display: inline-block;
vertical-align: middle;
white-space: normal;
}
.inner:first-child {
margin-right: 0;
}
You can see it at work in this fiddle:
http://jsfiddle.net/terraling/3V5rV/
The problem is the body background (here I'm just using color, but on my site it will be an image) leaks out into the body margins, i.e. the body content has a max-width and should be centred with white margins.
I can fix that either by... setting html background-color to white, as per
http://jsfiddle.net/terraling/yM53t/
...but body background becomes cutoff when scrolling into the second page (that wasn't a problem in the first fiddle).
Alternatively I could set the background image on a wrapper div and not on the body. That solves the problem of it leaking into the body margins, but it still has the same problem that it is cut off on scrolling.
(see: http://jsfiddle.net/terraling/3V5rV/1/ )
Any solution that involves removing the height: 100% declaration from any of html, body or wrapper collapses the layout (including replacing with max-height: 100%).
There's a whole lot of problems with this construct and not all of them can be solved, unfortunately.
The background issue
As you have seen yourself the background of body extends to the viewport if html does not have a background. That's solvable.
The float issue
When an element floats it does not contribute to the height of its parent element. So they don't grow (e.g. body does not expand). That can be solved if you can use alternatives. For vertically centering an element you could use display: table-cell e.g., which allows you to vertically center the content.
The height issue
This is where all hope is gone. height: 100% refers to the height of the parent, of course. The parent of body is html which in turn is the child of the viewport. You gave html the size of 100% (= the size of the viewport) and body the size of 100% (= size of html = size of viewport).
So now body has a fixed height and it can't expand meaning the background doesn't expand as well. Now one might have the idea to give body no size so that it can expand. But .page has 100% too. If a parent (in this case body) has no fixed size 100% has no meaning and will be treated as auto, which means as big as the content. And the content has a height of 300px. So the .page elements wouild no longer have the height of the viewport but 300px.
As for the collapse of the CSS, you should either specify the height specifically height:200px; or add padding to the bottom/top of the page so that the content wraps. You can also use min-height:200px; then add the margin-bottom:20px; to separate the pages. I would approach this at a specific height with the wrapper having the specific background-image and bottom-margin.
In order to center your background-image to the <html> you can specify the position as 50%.
This can be done by doing background:url('yourimage.jpg') repeat 0 50%;This will ensure the background is centered.
Sorry if this has already been asked, but I wasn't sure of the correct wording, so I couldn't search it up. I have an image that is very large width-wise, and I want it to go off of the browser window when using a smaller resolution, and if you have a bigger resolution, it will show more of the image (width wise ONLY, height needs to remain the same), this way it won't matter what resolution you're browsing at, the image will still be the same height, so the page content will stay mostly the same. Just putting it in with img tags adjusts the whole picture to fit the browser window, changing the height in the process. Below is a very crude diagram of what I want to happen.
The simple option is to add overflow: hidden; to the image container. E.g. http://codepen.io/pageaffairs/pen/Etikh
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.wrap {width: 60%; margin: 0 auto; background: ##e7e7e7; padding: 20px;}
.container {overflow: hidden;}
</style>
</head>
<body>
<div class="wrap">
<div class="container">
<img src="http://placehold.it/1024X600" alt="">
</div>
</div>
</body>
</html>
Use this code:
CSS:
.container {
width:100%;
height:100%;
position:fixed !important;
top:0;
left:0;
background-color:red;
right:0;
bottom:0;
}
.container img {
height:inherit;
width:100%;
}
The container is fixed and it is 100% width and height with its top, left, right, bottom values all set to zero pixels. The img in the container inherits the height set in the container block but the width is 100%.
HTML:
<div class="container">
<img src="http://placehold.it/1024X768">
</div>
JsFiddle:
http://jsfiddle.net/CVNf9/
I think this is what you're looking for:
.image-mask {
margin: 10px;
border: dotted 2px red;
overflow: hidden;
}
.image-mask img {
display: block;
width:1024px;
height:768px;
}
<div class="image-mask">
<img src="http://yourdomain.com/images/yourimage.png">
</div>
If necessary set a max-width on .image-mask (say if it has an actual border you want to display or something) to prevent it getting larger than the image width, or set margin: 0 auto to center it, etc.
Fiddle: http://jsfiddle.net/Aj59Z/2/
As simple as that:
img {
width: 1000px; /* Width of your img */
height: 600px; /* Height of your img */
}
And to avoid horizontal scroll bar, wrap your image with some element and set its overflow attribute to hidden, width to 100%
JSFiddle
http://jsfiddle.net/SVxJ4/1/
I want to add 100% width to my website. The problem is that If I do so, the design and the size of the contents changes with the change of the browser size. I want to make the contents inside the webpage constants although I give the size of the boxes in %
Try to fix min-width with % width of body, this will resize but will not let elements to get crushed if browser is thinned.
<html>
<head>
<style type="text/css">
body,html{ margin:0; padding:0; width:100%; min-width:800px;}
#container{
margin:0 auto;
}
#header, #content, #footer{
min-width:700px;
margin:0 auto;
}
div{
min-height:40px;
margin:10px;
background-color:red;
}
?
</style>
</head>
<body>
<div id="container">
container
<div id="header">header</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
</body>
</html>
Create a wrapper div with a fixed width, and then any element's width within it will be relative to that width.
eg
#wrapper {
width: 800px;
}
div {
width 80%; /*div will be 80% of 800px ie 640px*/
}
As I understand your question you can put contents in fixed width divs and put those inside of variable width div(%) and position them with margin or padding
You can also specify maximum-width/height for the components which you feel as should not be re-sized.