I am trying to upload an image using the img tag. But even linking the image correctly it is not rendering on the screen
Here is the code.
<div class="row">
<div class="col-6">
<h2>MUSEUM OF CANDY</h2>
</div>
<div class="col-6">
<img class=" img-fluid" src="imgs/hand2.png" alt="handimage">
</div>
</div>
</section>
Your source location might not be accurately defined. Please check through it once. If your alt information is visible. Then your problem is in source location.
there is a space in the class at the beginning of "; maybe that's the problem :)
Related
I am a beginner in web designing. I know some basics about layout in CSS.
I am tried to create a blog post layout, given in the picture below.
see image layout
Please help me to do that.
Welcome to StackOverflow! As heads up, usually you will want to come here for more specific questions to solve problems with your code, or to explain weird behavior you didn't quite understand. Your question is a little bit too open ended to be answered here but I can help you get started:
For starters, start thinking about translating every box in your picture into an HTML div. If you break each part of that picture into divs it can be a good foundation to add your css styling on top of. In your case, you might want something like this:
<div id="articleList">
<div id="article_1">
<div id="articleImage_1">
<img src="articleImage_1.jpg" alt="Picture #1">
</div>
<div id="articleContent_1">
<div id="articleTags_1"></div>
<div id="articleTitle_1"></div>
<div id="articleAuthorNameAndCommentsSubheader_1"></div>
<div id="articleBody_1"></div>
</div>
</div>
<div id="article_2">
<div id="articleImage_2">
<img src="articleImage_2.jpg" alt="Picture #2">
</div>
<div id="articleContent_2">
<div id="articleTags_2"></div>
<div id="articleTitle_2"></div>
<div id="articleAuthorNameAndCommentsSubheader_2"></div>
<div id="articleBody_2"></div>
</div>
</div>
</div>
Of course you would be generating each row inside a for loop or .map() type function. You would also add in your .css in a 'class' attribute for every div.
Please let me know if you find this helpful by selecting my post as the answer, and don't be shy if you have any more questions :)
If you know about boostrap than you can use this boostrap card to create that layout you want. Here is the sample code for it.
<div class="card w-50">
<div class="card-img-top d-flex align-items-center bg-light">
<div>
<img class="img-fluid" src="http://via.placeholder.com/150x150/1f1a38/ffffff?
text=Image" alt="Card image cap">
</div>
<p class="col p-2 m-0">Text next to the right of the image</p>
</div>
</div>
So basically I need to set icons / labels over the thumbnail picture, how to do it with CSS and HTML? If possible I need it to be responsive. Thanks in advance.
EDIT: Sorry for not posting code, here is what I have tried using Bootstrap 3 and Font Awesome:
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="img/test/test04.png" alt="thumb01">
<div class="col-xs-3 col-md-6">
<div class="delivery alert alert-success">
<i class="fa fa-truck" aria-hidden="true"></i>
</div>
</div>
</a>
</div>
</div>
Delivery class:
.delivery{
position: absolute;
font-size: large;}
Ok. Firstly, if you are using some framework, look for a solution that uses it. Secondly, if you do not use a structure, you can use #media in CSS to make your elements responsives, and for the layout, what you are looking for is a thumbnail or picture card, search for it in internet if you encounter difficulties. You can work using the image and the icons inside a div, then just work with the elements using CSS (display and the float, for example). Have fun :)
I have 3 images which I need to display this way:
I tried to make it using simplest way:
<div class="row">
<div class="col-xs-9">
<img src="/image/1.jpg">
</div>
<div class="col-xs-3">
<img src="/image/2.jpg"><br /><br />
<img src="/image/2.jpg">
</div>
</div>
But there is a problem with sizing: images are uploaded by user so all of them can have different sizes and proportions (so image can be a square instead of rectangle). Also I need to limit max-height of the row because images can have up to 1024px height.
Can you help me, please? Thanks in advance.
I'm trying to use Lightbox to display images:
<div class="t-body tb-padding">
<p class="c-black m-b-20">Images</p>
<div ng-repeat="images in selectedItemToView.images">
<div class="lightbox row">
<a href="/user/2" class="col-sm-2 col-xs-6">
<img src="/user/2" alt="" />
</a>
</div>
</div>
<div class="lightbox row">
<a href="/user/2" class="col-sm-2 col-xs-6">
<img src="/user/2" alt="" />
</a>
</div>
</div>
I have two DIVs, one with ngRepeat, and one without it. I'm displaying the same image. The images are displayed correctly, but when I click them, the images displayed with ngRepeat just downloads. The image outside works correctly, displaying the image in the Lightbox fashion (doesn't download).
I looked at the stylings applied and they both appear to have same CSS styles applied.
When I removed ng-repeat from the DIV, it works fine. So somehow using ngRepeat is causing Lightbox not to work.
Request headers:
With ng-repeat:
Without :
Any idea?
Thank you.
I'm building a website which will list some buildings for sale with a picture and a small description. Since I want the website to be responsive I'm trying to use the Bootstrap3 grid system.
So the current html I have is as follows (running code here on bootply):
<div class="container">
<div class="row">
<div class="col-sm-8">
<article class="row property-ad">
<div class="col-sm-4">
<img class="property-thumbnail" src="https://uwaterloo.ca/pharmacy/sites/ca.pharmacy/files/uploads/images/pharmacy-building-street-view.jpg">
</div>
<div class="col-sm-8">
<div class="property-ad-title">Nice building</div>
<div class="property-ad-description">and some describing text here</div>
</div>
</article>
</div>
<div class="col-sm-4">
<div class="right-side-ad">
some advertisement is going here
</div>
</div>
</div>
</div>
The problem is that the title and description are only displayed correctly on a large (lg) screen. On an md or sm screen however, the title and description are partly displayed on top of the image because the image appears larger than its container. I tried giving the image a max-width: inherit;, but that doesn't seem to do anything.
Next to the fact that I don't know how to give it a proper max-width, the main problem seems to be that I don't really know what behaviour I would want. Because if the image resizes its width, it would either get distorted, or it would also need to change its heigth. If the height changes however, the text next to it could get a larger height than the image, which would also make the layout look messy.
So my main questions;
What is the typical desired behaviour to make a website responsive when working with images that are next to text?
How would I implement that?
All tips are welcome!
Don't use your custome class for the img just add the bootstrap class for responsive images
img-responsive
<div class="col-sm-4">
<img class="img-responsive" src=".....jpg">
</div>
Check this Bootply
Simply stated: Bootstrap has the img-responsive class, or you could set max-width: 100% to the img tag.