So I have two image being used in two locations.
Location 1:
<div class="row">
<div class="col-md-1 col-md-offset-9">
<a>
<img alt="business card" class="img-responsive" src="/img/business_card_white.png"/>
</a>
</div>
<div class="col-md-1">
<a>
<img alt="printer" class="img-responsive" src="/img/printer_white.png"/>
</a>
</div>
</div>
Location 2
<div class="row">
<div class="col-md-7">
<form autocomplete="off">
<div class="form-group">
<input placeholder="What are you looking for?" type="text" class="form-control" id="search" data-provide="typeahead" data-source='{{keywordsList}}'/>
</div>
</form>
</div>
<div class="col-md-3">
<button type="button" class="btn btn-primary btn-block{{#if entry}} btn-lg{{/if}}" style="margin-bottom:15pt">or just show me EVERYTHING!</button>
</div>
<div class="col-md-1 center-block" style="margin-top:-9px;">
<a>
<img alt="business card" class="img-responsive" src="/img/business_card_white.png"/>
</a>
</div>
<div class="col-md-1 center-block" style="margin-top:-9px;margin-bottom:4px;">
<a>
<img alt="printer" class="img-responsive" src="/img/printer_white.png"/>
</a>
</div>
</div>
The images themselves are big and 512x512 and bootstrap decided to scale it down in location 1 to 79x79. Strangely, with the addition of an input field and a button in location 2, the images get scaled down to 59x59.
This whole scaling thing seems arbitrary to me and I'd really appreciate it if someone could explain the logic behind it to me.
The image width is dependent upon the column size. The reason for the discrepancy in image size between the two locations is because Location 2 was inside a <div class="col-md-10">.
What this did is it made the image smaller since the second location's width is 1/12 of 10/12 versus just 1/12 in location 1.
The image width depend on boostrap column size, if your image is responsive it will occupy all the column width
Related
I try to extract all links based on these three conditions:
Must be part of <div data-test="cond1">
Must have a <a href="..." class="cond2">
Must not have a <img src="..." class="cond3">
The result should be "/product/1234".
<div data-test="test1">
<div>
<div data-test="cond1">
Link 1
<div class="test4">
<div class="test5">
<div class="test6">
<div class="test7">
<div class="test8">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-test="test2">
<div>
<div data-test="cond1">
Link 2
<div class="test4">
<div class="test5">
<div class="test6">
<div class="test7">
<div class="test8">
<img src="bild.jpg" class="cond3">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm able to extract the links with the following xpath query.
//div[starts-with(#data-test,"cond")]/a[starts-with(#class,"cond")]/#href
(I know the first part is not really neccessary. But better safe than sorry.)
But I'm still struggling with excluding the links containing an descendant img tag and how to add it to the query above.
This should do what you want:
//div[#data-test="cond1" and not(.//img[#class="cond3"])]
/a[#class="cond2"]
/#href
/product/1234
In this code i am preparing a portfolio, now when i am placing an
image in my portfolio the image is not filling the border div and
going a side as you can see in the picture <IMAGE-first half> , <IMAGE-second half>. Can someone help me to keep four images that has borders only to the image and I need all four images placed like four boxes?
<section class="latestwork" id="work">
<div class="container">
<div class="row">
<div class="heading">
<h2 class="boxx">My Latest Work</h2>
<h6>These are my latest mobile photography captures</h6>
</div>
</div>
<div class="row">
<div class="myworkbuttons">
<button type="button" class="myworklink" data-filter="all">All</button>
<button type="button" class="myworklink" data-filter="creative">Creative</button>
<button type="button" class="myworklink" data-filter="black&white">Black/white</button>
<button type="button" class="myworklink" data-filter="portrait">Portraits</button>
</div>
</div>
<div class="row">
<div class="portfolio-items" data-category="urban-floods">
<div class="portfolio-inner-item" style="">
<div class="portfolio-img">
<img src="C:\portfolio's\drive-download-20210208T164603Z-001\The Disaster of 2020.jpg" alt="Image not loading">
</div>
</div>
<div class="portfolio-info">
<h4>Iso: </h4>
</div>
</div>
<div class="portfolio-items" data-category="buffalo">
<div class="portfolio-inner-item">
<div class="portfolio-img">
<img src="C:\portfolio's\drive-download-20210208T164603Z-001\buffalos path.jpg" style="float: left;" alt="Image not loading">
</div>
</div>
</div>
</div>
This is happening because the size of the image is not big enough.
Try adding width: 100% of the image component.
you can use grid and and use css importing file and try this code: .div{background-image: url("/assets/pics/picture.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover; min-height:50vh; min-width:50vw }//(or what size do you need.);
I have a page that displays a lot of divs, in 2 by x grid.. this is the code:
<div class="row d-flex justify-content-around" >
#foreach(auth()->user()->galleries as $gallery)
<div class="col-5
mb-5
p-3
rounded-lg
shadow
d-flex
justify-content-between
align-items-baseline
"
style="background-color: lightgrey;
background-size: 100%;
background-position: center;">
<div class="w-75">
<div class="">
<h2>{{$gallery->galname}}</h2>
</div>
<div class="">
SOME CONTENT...
</div>
</div>
<div class="my-auto">
<div class="d-flex justify-content-around p-1">
<button class="btn btn-primary" type="button" onclick="window.location='/gallery/{{ $gallery->id }}'">View / Edit</button>
</div>
</div>
</div>
#endforeach
</div>
So far it works great, but if i reduce the size of the browser or watch it on a cellphone, then they squish toghether.. I would like it to be responsive and jump to the next row if there is not enoguh space available.. so the 2 by x becomes a 1 by 2x table... how can this be done?
You may add classes for the responsive design after col-5, i.e. col-sm-10 which will change the size of the div in small screens.
.... class="col-5 col-sm-10 mb-5 ...
more info here
I have thumbnail with 4 images. All images have the same height. But in thumbnail they are not the same. I want to make them look the same.
Here what i got:
4 images:
1. 614x830
2. 599x830
3. 599x830
4. 599x830
In layout i get 4 images where 3 has the same height (image 2, 3 and 4) and image 1 has height smaller.
How to fix that problem? And why does it happen? Why it make height smaller if original height of images are the same?
Thanks!
<div class="row">
<div class="col-sm-3">
<div class="thumbnail">
<img src="img/1.jpg" class="img-responsive">
<div class="caption">
<h4 class="text-center"> Text caption</h4>
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<img src="img/2.jpg" class="img-responsive">
<div class="caption">
<h4 class="text-center"> Text caption</h4>
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<img src="img/3.jpg" class="img-responsive">
<div class="caption">
<h4 class="text-center"> Text caption</h4>
</div>
</div>
<div class="col-sm-3">
<div class="thumbnail">
<img src="img/4.jpg" class="img-responsive">
<div class="caption">
<h4 class="text-center"> Fall 2016</h4>
</div>
</div>
</div>
enter image description here
I am trying to image and its relevant data in bootstrap. For that I am writing code like below
<div class="col-xs-12 col-sm-3 col-sm-push-9">
<p style="padding:20px;"></p>
<h3 align=center>Our Lipsmacking Culinary Creations</h3>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-thumbnail" src="img/uthappizza.png" alt="Uthappiza">
</a>
<div class="media-body">
<h2 class="media-heading">Uthappizza</h2>
<p>A unique combination of Indian Uthappam (pancake) and
Italian pizza, topped with Cerignola olives, ripe vine
cherry tomatoes, Vidalia onion, Guntur chillies and
Buffalo Paneer.</p>
<p><a class="btn btn-primary btn-xs" href="#">More ยป</a></p>
</div>
</div>
</div>
</div>
I am getting output like this:
enter image description here
I want it to be side by side I don't know where I am going wrong.
Add pull-left to your image as a class. Bootply.