Here is my site: http://highcatering.wpengine.com/
At the bottom of the site, there is an image of a bride sitting on a couch.
I want that image to keep its height and width. Here's an example: http://lydialavin.com/category/colecciones/
If you see, all the images there don't change size when the screen resolution is reduced.
Any suggestions?
If i understand your question correctly, you don't want the image to be smaller than a specific value. In this case, you should set a min-width pixel value on the element. Let's say 900px:
#novia img {
display: block;
float: none;
margin: 0;
padding: 0;
width: 100%;
min-width:900px;
background-position: center center;
}
and remove the overflow-x from its container:
#novia {overflow-x: hidden;}
This way, the background won't get as small as it does now when you see it on smaller screens. Please note, though, that the element will not be perfectly centered as it is now, and some portion of the image will not be shown.
Alternatively, you could give the image a fixed value, but it wouldn't be as effective, as it would probably be too big for smaller screens.
This css will fix the width and height of you bgackground
<style>
.your-img{
background:url(img/bg.jpg) no-repeat center center fixed;
}
</style>
Related
At this page, around viewport width 870px, there is a gap that appears underneath each .program-image img:
How do I ensure each .program-image img is the height of each .program, or each .program is the height of each .program-image img?
Help appreciated.
As the image height is dependant on its width, a gap is created because of this rule. To avoid this, I commonly add the image as a background image of a div, setting the background-size to cover (which makes the image cover the entire div).
First, remove the image tag and place the background image within the program-image div.
<div class="program">
<div class="program-image" style="background-image:url('http://vmpersonal.com/wp-content/uploads/2017/02/program-pregnancy.jpg');">
...
Then I would go ahead to add the following css:
.program-image {
height: 90px; // Or whatever height needed
width: 45.23809523%;
float: left;
max-height: auto;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
This sets the height of the div as it will not take into account the height dimension of the image.
To make sure the image doesn't overflow over the program element. Add the following:
.program {
overflow: hidden;
}
Below is an example of how it looks (Second program is of how it currently is, example excludes background-position:center apologies).
I hope this helps.
<img> tag is inline-block element so you always need to define vertical-align for it. else make it block.
img {
vertical-align: top;
}
or use this
img {
display: block;
}
Maybe try:
height: 100%;
or
min-height: 100%;
on the image selector.
The goal I'm trying to achieve on my drupal 7 website is keeping an article image's border a certain size for all images (120x120) while the actual image themselves adjust according to the image style (100x100) and are middle aligned.
(I'm unable to provide example images because I don't have 10 reputation points...)
So for a portrait image the height would be capped at say 100px and the width will be whatever is the aspect ratio is.
Same thing in reverse with a landscape image, with the width being capped at 100px and the height being whatever the aspect ratio is.
All while the grey border stays a 120x120 block, and not changing according the image size.
Let me know if you need any code from my website to help with solving this.
The simplest way to achieve your goal is to use table-cell display property with vertical-align: middle on the parent div, with desired border, height and width set. Than your img should have set max-width and max-height properties to 100%. So having the HTML structure like this:
<div class="img-container">
<img src="..." />
</div>
Your CSS could be:
.img-container {
width: 120px;
height: 120px;
display: table-cell;
vertical-align: middle;
}
.img-container > img {
max-width: 100%;
max-height: 100%;
margin: 0 auto;
display: block;
}
Codepen showing the result: http://codepen.io/anon/pen/BpeOzG
I am using yahoo's pure.css layout and I am having some small issues. I have a logo which would replace the heading and i want the logo to be fluid as well(The size changes with the bsize of the browser window).
I am currently using the following:
h1.logo{
background-image: url('../images/LogoColor287x86.png');
background-size: 100%;
text-align: center;
background-repeat: no-repeat;
width: 100%;
float: none;
padding-top: 29.8%;
height: 0;
text-indent: -9999px;
}
This works but the result is not what i want. The above piece of CSS ensures that the logo occupies the maximum size available to it. But I want to to have a maximum size and centered. Say it should be a maximum size of 500px width even though the amount of space(width) available to it is 1000px.
Anyway to constrain the proportions.
For making the logo center use the property background-position: center center.
Also see jsfiddle: https://jsfiddle.net/Saiyam/7fzfoy43/2/
If I understand your problem correctly, you would like a background image to have a maximum size while remaining centered and scaling correctly when less space is available?
I accomplished this with nested elements - one positioned relative and taking the maximum space available to it. The nested element positioned absolute with the maximum values defined and then taking advantage of
background-size: contain;
See JS fiddle here: http://jsfiddle.net/4bgcokux/2/
put your logo inside a div with css text-align: -webkit-center;
HTML:
<div class="header">
<h1 class="logo"></h1>
</div>
CSS:
.logo {
background-image: url('https://images.google.com/intl/en_ALL/images/srpr/logo11w.png');
background-size:contain;
padding-top: 29.8%;
max-width: 50%;
background-repeat: no-repeat;
}
.header {
text-align: -webkit-center;
width:100%;
}
Hope it helps you...
I need to center images that will be wider than the parent div that contains them. the parent div is a fixed width and has the overflow set to hidden.
<div style='overflow:hidden; width:75px height:100px;'>
<img src='image.jpg' style='height:100px;' />
</div>
I must use an image as the child element because I need to resize the thumbnail dimensions and cannot rely on background-size since it is not supported on older versions of mobile safari which is a requirement. I also cannot use javascript for this, so it must be a css solution.
One more thing to note is that widths will vary between images, so I can't just use absolute positioning on the child element at a hard-coded offset.
Is this possible?
UPDATE:
for posterity, I've just found out that this can be accomplished on the older versions of mobile safari by using
-webkit-background-size:auto 100px;
of course, the background will be set as usual using 50% for left positioning. If you need this to work on another browser, the accepted solution is probably the best, but since this question was related to the iphone, this solution is a little cleaner.
How adverse are you to extra markup? Also, is there a max size for the images? For example, if your max image width is 225px then you could try:
<div class="frame">
<div>
<img src="image.jpg"/>
</div>
</div>
.frame {
overflow: hidden;
width: 75px;
height: 100px;
position: relative;
}
.frame > div {
position: absolute;
left: -5075px;
width: 10225px;
text-align: center;
}
.frame img {
height: 100px;
display: inline-block;
}
A fiddle example here: http://jsfiddle.net/brettwp/bW4xD/
Wouldn't using a background image still work? You shouldn't need to resize it.
Does something like this make sense? http://jsfiddle.net/QHRHP/44/
.container{
margin:0 auto;
width:400px;
border:2px solid #000;
height:250px;
background:url(http://placekitten.com/800/250) center top no-repeat;
}
Well if you know the width of the div and the width of the image, you can simply do some math.
Let's say the div is width 200px and the image is width 300px:
div.whatever {
width: 200px;
}
img.someImg {
left: -50px;
position: relative;
}
We know that since the width of the div is 200 pixes, then 100 pixels will be cropped from the image. If you want to center the image, then 50 pixels be hidden past the boundaries of the div on either side. Thus, we set the left position of the image to -50px.
Example (knowing the image size): http://jsfiddle.net/7YJCD/4/
Does that make sense?
If you don't know the image size or the div size, you can use javascript to detect these values and do the same thing.
Example (not knowing the image size, using jQuery javascript): http://jsfiddle.net/K2Rkg/1/
Just for reference, here's the original image.
I have a DIV of size 147x88 and inside it an image which has the same width, but might be larger in height. In this case, the image goes beyond the boundary of the DIV. Is there anyway to clip the image, keeping in mind that I want my page to work in old browsers which doesn't support CSS3 (IE7 and IE8)?
Just hide the overflow of the div, and the containing image will be cropped to the dimensions of the div.
div{width: 147px; height: 88px; overflow: hidden;}
Set overflow:hidden; on the div:
#yourDiv {
width:147px;
height:88px;
overflow:hidden;
}
Example: http://jsfiddle.net/purmou/sN5PL/
div { width: 147px; height: 88px; overflow: hidden; }
This question shows how to get the size of the image using JQuery.
You can have a little block that checks the size of the image when loading the page, and the set the size of the DIV accordingly.