Looking at internal details of a Telescope!

Introduction

This week, I'm working on an issue on Telescope. You might ask what Telescope is? Telescope is a tool written by Seneca College students and used to keep track of the process of student weekly by fetching their blog post on multiple sites such as: https://dev.to/, http://medium.com/,...

What is the issue?

In certain posts, pictures are scaled up beyond their natural size. Consequently, the quality of the pictures is reduced and make users uncomfortable. We have to find a way to fix it.

How to fix it?

I realized this problem only happens to those posts fetched from https://www.blogger.com/ because the images' width is not fully displayed in the original post.

And in the css file of the post, I have seen something like:

.telescope-post-content img {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  padding-top: 1.5rem;
  padding-bottom: 1rem;
  width: 100%;
}

Due to width: 100%, the pictures may get scaled beyond their natural size. To fix it, I have set width: auto and display: block to display width as their natural size. And if the picture's width is not fully displayed, it will be centered

.telescope-post-content img {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
  padding-top: 1.5rem;
  padding-bottom: 1rem;
  width: auto;
  display: block;
}

Result after change:

Challenges while fixing this issue

• The only difficulty I encountered while fixing this issue is the amount of time it takes to set up a proper environment to run the app. You can check my PR at here to have a closer look at the changes I made.