i need to align-center the images and the caption of the bootstrap carrousel
i use php code tho show random images from dataase
here is the i use to keep aspect ratio:
<div class="item">';
while ($resultados = $arte->fetch_assoc()) {
$title = utf8_encode($resultados['titulo']);
$id = $resultados['medidas'];
$tec = utf8_encode($resultados['tecnica']);
$img = $resultados['imagen'];
$home .= ' <img src="'.$img.'" style="background-size: cover;background-size: cover;width: auto;height: auto;min-width: 1%;max-height: 600px;max-width: 1000px;">
<div class="container">
<div class="carousel-caption">
<h1>'.$title.'.</h1>
<p class="lead">'.$id.'<br> '.$tec.'</p>
<a class="btn btn-large btn-inverse" href="/arte_objeto">Ver más</a>
</div>
</div>';
}
$home .= '</div>
this is the result:
http://prntscr.com/64h3vb
so align the caption too so it shows the image in the center of the carousel
i tried with:
background-position: center center;
but doesnt work
Use margin:0 auto; on the div's/images you'd like to center.
Use your "inspect element" to find the div's that are pulling to the left and then apply that css.
the problem was position:absolute; on .carousel img { so i removed it and
also added margin: 0 auto; to .carousel img {
Related
I have a web application layout like this, styled with Bootstrap:
------------------------
| Header |
------------------------
| Display Area |
------------------------
The Header is a collection of control elements (mostly buttons) and therefore almost of same height.
The Display Area contains the following:
<div class="row">
<div class="col">
<img class="img-fluid" src="http://localhost/api/currentImage" />
</div>
</div>
http://localhost/api/currentImage returns an image. The image's size always differs: sometimes the width is bigger than height, sometimes vice versa.
Now I'd like to scale the image in that way that it uses as much as possible of the available Display without "overflowing". By overflowing, I mean that there is never a need to show a horizontal or vertical scroll bar because the image is too wide or too high. Right now, <img class="img-fluid" ... only scales the width correctly.
How can I achieve this using Bootstrap/CSS?
Bootstrap will let you resize images with its img-fluid class, but if you need to make the image cover the entire space you would have to write your own CSS, you could make use of the object-fit property to set the image to fill the container, while maintaining its aspect ratio and clipping off if necessary;
As you can see in the example below, the image is narrow, but it will fill the entire container even if it has to expand to do so.
EDIT: Included two more examples with fill and contain so you can see how their behavior changes.
header {
border: 1px solid red;
padding: 10px;
}
section {
border: 1px solid blue;
}
img {
height: calc(100vh - 20px);
width: 100%;
/* This is just to remove a blank space at the bottom of the image */
display: block;
}
img.cover {
object-fit: cover;
}
img.contain {
object-fit: contain;
}
img.fill {
object-fit: fill;
}
<header>
This is a header
</header>
<section>
<img class="cover" src="https://via.placeholder.com/200x700" />
</section>
<section>
<img class="contain" src="https://via.placeholder.com/200x700" />
</section>
<section>
<img class="fill" src="https://via.placeholder.com/200x700" />
</section>
Bootstrap has a predefined classes for responsive image. Check the following class,
.img-responsive Makes an image responsive (will scale nicely to the parent element)
<div class="row">
<div class="col">
<img class="img-fluid img-responsive" src="http://localhost/api/currentImage" />
</div>
</div>
`
In Magento 1.9.0.1, how can I overlap 2 images on image product (product page) and resize they in the same way as image product resize on changing resolution?
I tried with css pseudo-element (:before and :after) but I'm not able to resize and to be honest I noticed strange behavior (images initially isn't shown and appear only when you resize Chrome/Firefox window...).
.product-image.product-image-zoom.zoom-available:before {
content: url("/media/css/image_top.png");
z-index: 10;
position: absolute;
top: -6px;
left: -5px;
}
.product-image.product-image-zoom.zoom-available:after {
content: url("/media/css/image_bottom.png");
z-index: 10;
position: absolute;
bottom: -4px;
}
So alternatively, I tried to insert the images through html in view.phtml
......
<div class="product-img-box">
<div class="product-name">
<h1><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h1>
</div>
<img src="media/css/image-top.png">
<img src="media/css/image_bottom.png">
<?php echo $this->getChildHtml('media') ?>
</div>
.......
and with similar css I was able to place it in right position but... I don't know how to "bind" resizing with product image so they can scale "togheter" (image product, image-top.png and image-bottom.png) like if they was a only one image.
Image1: http://s30.postimg.org/7fnfl2yrl/screen.png
Image2: http://s30.postimg.org/78z4gzh0x/screen3.png
I'm just a dumb, I realized now that in view.phtml
<?php echo $this->getChildHtml('media') ?>
call file /template/catalog/product/view/media.phtml so I put my <img> inside
<div class="product-image-gallery">
container and now they resize correctly. For "micro-adjust" resizing of image-top.png that less wide of div container I added some padding-right.
Is there any nice clean way to put nesteded button elements of a div in center with style set to "table" ?
Ideally I do not want to contain the buttons within an additional div.
<div class="the-tabs">
<button class="tool-button dark_mini"><img src="Tools-icon.png"></button>
<button class="help-button dark_mini"><img src="Info-icon.png"></button>
<button class="save-button dark_mini"><img src="Zoom-in-icon.png"></button>
<button class="save-button dark_mini"><img src="Save-icon.png"></button>
<div id="the_preview" style="width:<?php echo $third_w;?>px;height:<?php echo $third_h;?>px;">
<div id="loading"><img src="images/loading.gif"><br/>Loading .... </div>
<img src="<?php echo $the_img;?>" width=" <?php echo $width_new;?>px" height=" <?php echo $height_new;?>px" id="preview" class="preview_color"/>
</div>
</div>
Not 100% sure what you mean but here goes...
.the-tabs {
text-align: center;
}
That will centre the buttons within the parent div. Is that what you mean?
JSFiddle
I have a parent element that has dynamic text in it that needs to be confined into a certain area. I had users that where writing sentences without using spaces (example:yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy etc...) This was breaking the structure of my styled text area.
#ProfileCommentBody{ width:500px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333333; margin:15px 0px 0px 20px; float:left; background-color:#EAF7FB; padding:10px 10px 10px 10px; position:relative; overflow:hidden;}
I used overflow:hidden,as you can see above in the css code, and it solved the problem but created a new problem. I have another another element that is a image that is absolutely positioned that completes the style of my speech bubble ( the above element is the speech bubble) and when I have the above element on overflow:hidden it make that image disappear. I have tried z-index and that does not work.
.ProfileCommentTail{background:url(images/speechBubbleTail.png) no-repeat top left; width:15px; height:10px; position:absolute; top:20px; left:-15px;}
Is there a different option to use besides overflow:hidden or is there something I can do to counteract the unwanted part of what the overflow:hidden is doing?
html structure:
<div id='ProfileCommentBody' class='round_10px'>
<div id='CommentNameProfile'>
<div class='ProfileCommentTail'> </div>
<a href='http://www.blahblahblah.org/Profile.php?id=<?php echo $poster->id; ?>'>
<?php echo $poster->first_name. " ". $poster->last_name; ?> says...
</a>
</div>
</div>
Here is an example of an imgage of what it is doing now,which is wrong (missing speech bubble tail to the right of the polaroid, and the left of the speech bubble) overflow:hidden is causing this to disappear, but fixing another problem I was having:
(source: cysticlife.org)
here is what it is SUPPOSED to look like, notice the tiny blue speech bubble tail connected to the speech bubble:
(source: cysticlife.org)
<div id="blah">
<div class='ProfileCommentTail'> </div>
<div id='ProfileCommentBody' class='round_10px'>
<div id='CommentNameProfile'>
<a href='http://www.blahblahblah.org/Profile.php?id=<?php echo $poster->id; ?>'>
<?php echo $poster->first_name. " ". $poster->last_name; ?> says...
</a>
</div>
</div>
</div>
This is what I meant by my initial comment. CSS such as:
#blah { position:relative; }
Then again, because there is no layout/design/comp links it's hard to see what you are describing. I suggest posting visual details for visual problems.
I just finished my captcha script so it has the captcha image then next to it I have a link that is a small image that can be clicked to refresh the image to a new one.
I am wanting to make this small image be on top, on the bottom left corner of the large image, can someone help me with the CSS? Below is my complete code
<img src="captcha.php?sid=<?php echo md5(uniqid(time())); ?>" id="image" align="absmiddle" />
<a href="#" onclick="document.getElementById('image').src = 'captcha.php?sid=' + Math.random(); return false">
<img src="refresh.gif" alt="Reload a new image" border="0">
</a>
HTML
<div id="images-container">
<img src="image-big.png" alt="Big Image" id="big-image">
<img src="image-small.png" alt="Small Image" id="small-image">
</div>
(if you are using XHTML, don't forget to change the end of the image tag to use /> instead of >
CSS
#images-container {
position:relative;
}
#big-image {
position:absolute; /* position:absolute aligns to the parent container
which in the HTML above is the <div> element */
bottom:0;
left:0;
z-index:0;
}
#small-image {
position:absolute;
bottom:0;
left:0;
z-index:1;
}
The important thing for the z-index is that #small-image has a higher number than #big-image . If your repeating this effect, use classes instead of ids.
You'll want to use the CSS z-index property to set which image will display on top of the other:
http://www.w3schools.com/Css/pr_pos_z-index.asp
You'll probably want to use relative or absolute positioning to position the small image:
http://www.w3schools.com/Css/css_positioning.asp
I think what you need to do is to set css property position: relative; to #images-container div, and leave the other css rules as they were.
If you do that the images will be absolutely positioned but relative to their parent div instead of the body(whole screen).
Well.. good luck!
Z-index stuff can get sloppy in my experience. Why not just use an inline style to set your captcha as the background image of a div? Something like so:
<div id="image" style="background: url(captcha.php?sid=<?php echo md5(uniqid(time())); ?>) no-repeat; width: 100px; height: 100px;" id="image" align="absmiddle" >
<img src="refresh.gif" alt="Reload a new image" border="0" onclick="document.getElementById('image').style.backgroundImage = 'captcha.php?sid=' + Math.random(); return false">
</div>